Let's say I have a button:
<button class="btn btn-primary" (click)="moveImage()">Move image!</button> and some image:
<img src="ball.png"> I've found this: http://www.w3schools.com/angular/angular_animations.asp but couldn't find any documented version of Angular 2 for this library.
I saw this: https://angular.io/docs/ts/latest/api/animate/ but it does not say anything to me.
How I can use angular 2 to make the ball image bounces or move it using CSS Transitions?
Any references?
@Directive({ selector : '[animate-box]', host : { '[style.background-color]' : "'transparent'" }, 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; } 
