Angular 2如何强制动画重播

我试图重新激活DOM元素的相同动画，每次输入更新。Angular 2如何强制动画重播

将动画定义为分配给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%; 

}

来源

2016-08-01 Gil Alexander

我会告诉你如何与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) 
    } 
}

来源

2016-08-02 09:01:40 micronyks

现在有一个回调函数。

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

所以我觉得你可以更改animationDone状态，使其重复

来源

2017-05-01 21:03:16 maxisam

Angular 2如何强制动画重播

回答

相关问题