Angular 2如何强制动画重播答案

【问题标题】：Angular 2 how to force animation replayAngular 2如何强制动画重播
【发布时间】：2017-05-02 05:03:16
【问题描述】：

我试图在每次输入更新时为 DOM 元素重新激活相同的动画。

动画被定义为分配给 css 类的 css 关键帧，我现在使用的触发器是删除然后重新分配该 css 类，稍有延迟以使浏览器能够处理并在收到新的更改之前渲染该更改。在我看来，这充其量只是很麻烦，而且更容易出错。

据我了解，它也不完全是 angular 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%;

}

【问题讨论】：

标签： angular css-animations ngrx

【解决方案1】：

现在有回调函数了。

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

所以我认为您可以更改 animationDone 中的状态以使其重复

【讨论】：

【解决方案2】：

我将向您展示如何使用 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)
  }
}

【讨论】：