Angular 2如何強制動畫重播

我試圖重新激活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%; 

}

來源

2016-08-01 Gil Alexander

我會告訴你如何與Angular2 animation做到這一點。您可以使用看看官方文檔在這裏：https://angular.io/docs/ts/latest/guide/animations.html#

工作演示：https://plnkr.co/edit/7s4cH4pvizqXny1Q49UJ?p=preview

代碼：

 //our root app component 
import {Component} from '@angular/core'; 
import {animate} from '@angular/core'; 
import {Component} from '@angular/core'; 
import {style, state} from '@angular/core'; 
import {transition} from '@angular/core'; 
import {trigger} from '@angular/core'; 


@Component({ 
    selector: 'my-app', 
    animations: [ 
    trigger("ballAnimation", [ 
     transition("void <=> *", [ 
     style({ 
      transform: "scale(1.5)", 
     }), 
     animate("800ms") 
     ]), 

    ]) 
    ], 
    template: 
    ` 
    <div *ngIf="show" @ballAnimation="'b'" class="ball"></div> 
    ` 

}) 
export class App { 
    show=true; 
    constructor(){ 
    setInterval(()=>{ 
    this.show=!this.show; 
     console.log(this.show); 
    },800) 
    } 
}

來源

2016-08-02 09:01:40 micronyks

現在有一個回調函數。

(@flyInOut.start)="animationStarted($event)" 
    (@flyInOut.done)="animationDone($event)"

所以我覺得你可以更改animationDone狀態，使其重複

來源

2017-05-01 21:03:16 maxisam

Angular 2如何強制動畫重播

回答

相關問題