のは、私がボタンを持っているとしましょうアンギュラ2

Question

で画像をアニメーションこのライブラリのAngular 2を指定します。

私はこれを見た：https://angular.io/docs/ts/latest/api/animate/をそれは私には何も言いません。私はボール画像のバウンスをしたり、CSSトランジションを使用して、それを動かすために、角度2を使用することができますどのように

？

のすべての参照？

Answer 1

Plunker example

@Directive({ 
    selector : '[animate-box]', 
    host : { 
    '[style.background-color]' : "'transparrent'" 
    }, 
    exportAs : 'ab' 
}) 
class AnimateBox { 
    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"); 
     if(count) { 
      a = this.createAnimation(!forward, --count); 
      console.log('a ' + a); 
     } 
    }; 

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

@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; 
}