Angular 2 how to force animation replay -

i’m trying re-activate same animation dom element, each time input gets updated.

the animation defined css keyframes assigned css class , trigger i’m using removing , re-assigning css class, slight of delay in order enable browser process , render change before new 1 received. seems me cumbersome @ best, , more error prone.

to understanding, it’s not angular 2 animation about, don’t have different states , transitions between them, rather animation wish re-activate on , over.

i ran this article, seem support need, exposes ‘oncomplete’ etc., turns out obsolete per latest angular rc.

am missing something? there way elegantly without writing own “animation” api, not strictly dependent on hard-coded timed values? i'd solution not costly, performance-wise, if possible.

i’d appreciate input on that.

here’s my current dummy-implementation on plunkr.

<!-- language: lang-html--> <div #newball class="ball ball-in"></div>  <!-- language: typescript --> import {component, viewchild} 'angular2/core';  @component({   // declare tag name in index.html component attaches   selector: 'hello-world',    // location of template 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 replay, removing , adding (after slight delay) given css class-name.  @param {elementref}    viewchild   view child animate.  @param {string}    classname       name of animation class.  @param {number}    timeout         (optional) timeout (to enable browser recieve dom manipulation , apply before 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%;  } 

i'll show how angular2 animation. can use take @ official docs here : https://angular.io/docs/ts/latest/guide/animations.html#

working demo: https://plnkr.co/edit/7s4ch4pvizqxny1q49uj?p=preview

code:

     //our root app component import {component} '@angular/core'; import {animate} '@angular/core'; import {component} '@angular/core'; import {style, state} '@angular/core'; import {transition} '@angular/core'; import {trigger} '@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)   } }