Angular 2 Wie erzwinge Animation Replay

Question

Ich versuche, die gleiche Animation für ein DOM-Element jedes Mal neu zu aktivieren, wenn eine Eingabe aktualisiert wird.

Die Animation ist als CSS-Keyframes definiert, die einer CSS-Klasse zugewiesen ist, und der Trigger, den ich jetzt verwende, ist durch Entfernen und erneutes Zuweisen der CSS-Klasse mit einer leichten Verzögerung, um den Browser zu aktivieren verarbeiten und rendern Sie diese Änderung, bevor eine neue empfangen wird. Dies erscheint mir im besten Fall umständlich und mehr als fehleranfällig.

Zu meinem Verständnis ist es auch nicht genau, worum es bei eckigen 2 Animationen geht, da ich nicht wirklich verschiedene Zustände und Übergänge zwischen ihnen habe, sondern nur eine Animation, die ich immer wieder aktivieren möchte.

Ich lief in this article, die scheinen zu unterstützen, was ich brauche, wie es "onComplete" etc. exponiert, aber stellt sich als überholt nach der neuesten Angular RC.

Fehle ich etwas? Gibt es eine Möglichkeit, dies elegant zu tun, ohne meine eigene "Animations" -API zu schreiben, so dass sie nicht so streng von fest programmierten Zeitwerten abhängig ist? Ich möchte auch, dass die Lösung, wenn möglich, nicht zu kostspielig ist, wenn es um die Leistung geht.

Ich würde sehr schätzen Sie Ihren Beitrag dazu.

Hier 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

Ich werde Ihnen zeigen, wie es zu tun mit Angular2 animation. https://angular.io/docs/ts/latest/guide/animations.html#

Arbeits Demo: https://plnkr.co/edit/7s4cH4pvizqXny1Q49UJ?p=preview

Code: jetzt

 //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

Es gibt eine Callback-Funktion können Sie hier bei offiziellen Dokumente verwenden, um einen Blick darauf werfen.

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

so glaube ich Ihnen den Zustand, in animationDone ändern können, um es

zu machen wiederholen