角2アニメーション再生を強制する方法

Question

入力が更新されるたびに、DOM要素の同じアニメーションを再アクティブ化しようとしています。

アニメーションはCSSクラスに割り当てられたCSSキーフレームとして定義されています。私が今使用しているトリガーは、ブラウザを有効にするために若干の遅延を加えてそのCSSクラスを削除してから再割り当てすることです新しいものが受け取られる前にその変更を処理し、レンダリングします。 これはせいぜい面倒なようですが、エラーが発生しやすくなります。

角度2のアニメーションについては正確には分かりませんが、実際には異なる状態や遷移はありませんが、何度も何度も再起動したいアニメーションです。

私はthis articleに遭遇しました。これは、 'onComplete'などを公開しているので、私が必要とするものをサポートしているようですが、最新のAngular RCのように時代遅れになっています。

何か不足していますか？私自身の "アニメーション" APIを書かずにエレガントに行う方法があるので、厳密にハードコードされた時限値に依存していませんか？ 可能であれば、パフォーマンスに賢明ではなく、コストがかかりすぎないようにしたいと思います。

私はあなたの意見を非常にうれしく思います。

は、ここで私はAngular2 animationでそれを行う方法を紹介します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%; 

} 

Answer 1

です。 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) 
    } 
} 

Answer 2

コールバック関数が用意されましたあなたはここに公式ドキュメントを見て使用することができます。

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

ので、私はあなたがそれが

を繰り返し行うことanimationDone状態を変更することができると思います