新たにレンダリングされた要素のアニメーションですが、ページのロードではありません

Question

Firebaseのリアルタイムデータベースを購読していますので、何かを提出するとすぐにjQueryやajaxを必要とせずにビューにレンダリングされます。

DOMに新しい要素が追加されたときにそのdivのbackground-colorが緑色でゆっくりと消えるように、そのような要素のレンダリングをアニメーション化したいと思います。私がしたくないのは、このクラスのすべてのdivがこのアニメーションを読み込むことです。

私は元を行う方法を知っている：

@keyframes green-fade { 
    0% {background: rgb(173, 235, 173);} 
    100% {background: none;} 
} 

.post-div { 
    animation: green-fade 5s ease-in 1; 
} 

しかし、もちろんこのアニメーションは、負荷を含め、このクラスのためにそれをレンダリングしていますいつでも起こります。

私は「角度2ウェイ」に興味があります。

Answer 1

は、これを行うための簡単な方法があります：あなたが抑制したい場合は、次の、ビューの初期化時にアニメーションを入力するだけで、次のアニメーションでそれをラップ：

template: ` 
    <div [@preventInitialChildAnimations]> 
    <div [@someAnimation]>...</div> 
    </div> 
`, 
animations: [ 
    trigger('preventInitialChildAnimations', [ 
    transition(':enter', [ 
     query(':enter', [], {optional: true}) 
    ]) 
    ]), 
    ... 
] 

Answer 2

アイテムがネットワークを通過したときにアイテムの状態をチェックするトリガを追加します。ここでは、itemStateがnewのときにアニメーションをトリガーしています。

trigger('itemState', [ 
 
     transition('* => new', animate(5000, keyframes([ 
 
     style({ backgroundColor: 'red', offset: 0 }), 
 
     style({ backgroundColor: '*', offset: 1.0 }) 
 
     ]))),

あなたのトリガーアイテムの状態への参照を与える、とするとき、アニメーションが終了ヌルに設定します。

<div [@itemState]="someItem.itemState" (@itemState.done)="someItem.itemState=''">

あなたが新しいとしてフラグそれらができるようにあなたの記事へitemStateプロパティを追加してください！

Answer 3

初期ビューレンダリングの終了後、ライフサイクルフックAfterViewInitを使用してアニメーションをアクティブにすることができます。角度4.25以来

https://embed.plnkr.co/5l1kf5lMLEXSE8pNzqik/

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div *ngFor="let item of items" [@greenFade]="animate ? 'in' : null"> 
     {{item}} 
    </div> 

    <button (click)="addItem()">add</button> 
    `, 
    animations: [ 
    trigger('greenFade', [ 
     transition('void => in', [style({background: 'rgb(173, 235, 173)'}), animate('5s ease-in')]) 
    ]) 
    ] 
}) 
class App implements AfterViewInit { 
    constructor(private cdRef: ChangeDetectorRef){} 

    items: String = ['Item','Item','Item']; 
    addItem(){ 
    this.items.push('Item'); 
    } 

    animate: boolean; 
    ngAfterViewInit(){ 
    this.animate = true; 
    this.cdRef.detectChanges(); 
    } 
}