我試圖重新激活DOM元素的相同動畫,每次輸入更新。Angular 2如何強制動畫重播
將動畫定義爲分配給css類的css關鍵幀,而我現在使用的觸發器是通過刪除然後重新分配該css類,並稍稍延遲以使瀏覽器能夠在收到新消息之前處理並呈現該更改。 這在我看來似乎很麻煩,而且更容易出錯。
據我的理解,這也不是什麼角2動畫是關於,因爲我沒有真正有不同的狀態和他們之間的轉換,而只是一個動畫,我希望重新激活一遍又一遍。
我遇到了this article,它似乎支持我所需要的,因爲它暴露了'onComplete'等,但是根據最新的Angular RC,它已經過時了。
我錯過了什麼嗎?有沒有一種方法可以在不編寫我自己的「動畫」API的情況下優雅地完成,因此它不會嚴格依賴於硬編碼的定時值? 如果可能的話,我也希望解決方案不要太昂貴,性能明智。
我非常感謝您對此的意見。
這裏的my current dummy-implementation on Plunkr.
<!-- language: lang-html-->
<div #newBall class="ball ball-in"></div>
<!-- language: typescript -->
import {Component, ViewChild} from 'angular2/core';
@Component({
// Declare the tag name in index.html to where the component attaches
selector: 'hello-world',
// Location of the template for this component
templateUrl: 'src/hello_world.html'
})
export class HelloWorld {
@ViewChild('newBall') newBall: ElementRef;
constructor(){
//emulate @input changed externally
setInterval((i) => {
this.reActivateAnimation(this.newBall, 'ball-in');
}, 1000);
}
/**
@fn private reActivateAnimation(viewChild: ElementRef, className: string, timeout: number = 30): void
@brief Force animation to replay, by removing and then adding (after a slight delay) a given CSS class-name.
@param {ElementRef} viewChild The view child to animate.
@param {string} className Name of the animation class.
@param {number} timeout (Optional) the timeout
(to enable the browser to recieve the DOM manipulation and apply it before the next change).
*/
private reActivateAnimation(viewChild: ElementRef, className: string, timeout: number = 30): void {
viewChild.nativeElement.classList.remove(className);
setTimeout(x => {
viewChild.nativeElement.classList.add(className);
}, timeout);
}
}
<!-- language: css -->
.ball-in {
animation: ball-in 0.5s forwards;
}
@keyframes ball-in {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
.ball {
width: 5.5rem;
height: 5.5rem;
margin-top:50vh;
margin-lefrt:50vw;
background-size: contain;
background-color:red;
background-repeat: no-repeat;
color: #fff;
border-radius:50%;
}