Question

每次输入更新时，我都会尝试为DOM元素重新激活相同的动画。

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

根据我的理解，它也不是什么角度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%;

}

Answer 1

我将通过 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)
  }
}

Answer 2

现在有一个回调函数。

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

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

Angular 2如何强制动画重放

2 个答案: