2

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

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

据我了解，它也不完全是 angular 2 动画的意义所在，因为它们之间并没有真正的不同状态和转换，而只是我希望一遍又一遍地重新激活的动画。

我遇到了这篇文章，它似乎支持我需要的东西，因为它公开了“onComplete”等，但根据最新的 Angular RC，它已经过时了。

我错过了什么吗？有没有办法在不编写我自己的“动画”API 的情况下优雅地做到这一点，这样它就不会那么严格地依赖于硬编码的定时值？如果可能的话，我还希望解决方案在性能方面不会太昂贵。

我非常感谢您对此的意见。

这是我目前在 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%;

}
4

2 回答 2

1

现在有一个回调函数。

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

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

于 2017-05-01T21:03:16.697 回答
0

我将向您展示如何使用Angular2 动画来做到这一点。您可以在这里查看官方文档： 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)
  }
}
于 2016-08-02T09:01:40.077 回答