立即返回到Angular2基於動畫的初始狀態，以便能夠多次運行動畫

Question

我試圖用Animate模塊完成一個簡單的Angular2動畫。

這是我設法到目前爲止做：https://plnkr.co/edit/o0ukvWEB4THB0EQmv0Zu

一切都是因爲我期待它，紅十字會在逐步向頂級運動消失。

我的問題是，我想能夠做多次相同的動畫，因爲我想要的。

我使用了onComplete方法和一個將樣式重置爲初始狀態的回調函數。我唯一的問題是，不是立即返回到初始狀態，而是對象「迴歸」。所以我有兩個動畫，而不是隻有一個。

我想我誤解了Angular2 Animate模塊的一些概念，或者可能只是缺乏必需的CSS技巧。

任何幫助表示讚賞。

這是到目前爲止我的代碼：

//our root app component 
import {Component, Directive, ElementRef} from 'angular2/core'; 
import {bootstrap} from 'angular2/platform/browser'; 
import {AnimationBuilder} from 'angular2/src/animate/animation_builder'; 
import Subject from '@reactivex/rxjs/dist/cjs/Subject'; 

@Directive({ 
    selector : '[animate-box]', 
    host : { 
    '[style.background-color]' : "'transparrent'" 
    }, 
    exportAs : 'ab' 
}) 
class AnimateBox { 
    animation: Animation; 
    a:Animation; 

    cb: Function =() => { 
     console.log("animation finished"); 
     console.dir(this.a); 
     this.a.applyStyles({top: '-20px', opacity: '100' }); 
    }; 

    constructor(private _ab: AnimationBuilder, private _e: ElementRef) { 

    } 


    toggle(isVisible: boolean = false) { 
    this.animation = this._ab.css(); 
    this.animation 
     .setDuration(1000); 

    this.animation.addAnimationClass("test-animation-class"); 

    this.animation.setFromStyles(
       { 
        top: '-20px', 
        opacity: '100', 
       }) 
      .setToStyles(
       { 
        opacity: '0', 
        top: '-120px' 
       }); 

    this.a = this.animation.start(this._e.nativeElement); 

    this.a.onComplete(this.cb); 
    } 
} 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <span class="vote"><span animate-box #box="ab" class="test-vote"><i class="fa fa-close"></i></span>1</span> 
    <button data-tooltip="I’m the tooltip text." (click)="box.toggle(visible = !visible)">Animate</button> 
    `, 
    directives : [AnimateBox] 
}) 
export class App { 
    visible = true; 
} 

bootstrap(App).catch(err => console.error(err)); 

Answer 1

更新

我剛創建兩個動畫向前和向後和先前的的onComplete回調月底開始一個運行動畫。

Plunker

class AnimateBox { 
    //animation: Animation; 
    //a:Animation; 

    constructor(private _ab: AnimationBuilder, private _e: ElementRef) {} 

    createAnimation:Function = (forward:boolean, count:number):Animation => { 
    animation = this._ab.css(); 
    animation.setDuration(1000); 
     animation.addAnimationClass("test-animation-class"); 
     if(forward) { 
     animation.setFromStyles({ 
      top: '-20px', 
      opacity: '100', 
     }) 
     .setToStyles({ 
      top: '-120px' 
      opacity: '0', 
     }); 
     } else { 
     animation.setFromStyles({ 
      top: '-120px', 
      opacity: '0', 
     }) 
     .setToStyles({ 
      opacity: '100', 
      top: '-20px' 
     }); 
     } 

     a = animation.start(this._e.nativeElement); 
     console.log(a); 
     a.onComplete(() => { this.onComplete(forward, count);}); 
    }; 

    onComplete:Function = (forward:boolean, count:number) => { 
     console.log("animation finished"); 
     //console.dir(this.a); 
     //animation.applyStyles({top: '-20px', opacity: '100' }); 
     if(count) { 
      a = this.createAnimation(!forward, --count); 
      console.log('a ' + a); 
     } 
    }; 

    toggle:Function =(isVisible: boolean = false) => { 
    this.createAnimation(true,10); 
    }; 
} 

原

當您設置

cb: Function =() => { 
    console.log("animation finished"); 
    console.dir(this.a); 
    // this.a.applyStyles({top: '-20px', opacity: '100' }); 
}; 

top是動畫回來。只需評論該行，並在移動後停止。

setFromStyles()也是多餘的，因爲該元素已經具有該樣式。