Instantly reset after Angular2 animation based animation to be able to run animation several times

Question

I am trying to do a simple Angular2 animation using Animate modules.

Here is what I managed to do so far: https://plnkr.co/edit/o0ukvWEB4THB0EQmv0Zu

Everything is as I expect, the red cross gradually disappears when moving to the top.

My problem is that I want to be able to do the same animation as many times as I want.

I used a onCompletecallback method that resets styles. The only problem I am facing is that instead of instantly returning to its original state, the object "nullifies" back. So I have two animations, not just one.

I think I don’t understand some concepts of Animate modules or just lack the necessary CSS skills.

Any help was appreciated.

Here is my code:

//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

Update

I created only two animations to fast forward and rewind and launched one run at the end of the onComplete callback of the previous animation.

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

original

When you install

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

top . , .

setFromStyles() , .