CODEWITHSUNDEEP
htmlcssangulartypescriptanimation
Chris Phillips
Chris Phillips

Reputation: 2124

What is causing my animation to fail on plays after the first?

My goal is to re-implement mat-tab from the Angular Material component library.

Using the L and R buttons, I'm playing an animation that adjusts the left style on a collection of buttons. The issue I'm having is that I can only play each animation once. For example, I can traverse positions right from 0 to 1, and then traverse left from 1 to 0 - but if I try and traverse right from 0 to 1 a second time, nothing happens. All of the animations are referenceable in an array, and are not being altered after creation - so why is the behavior changing when I reuse them?

StackBlitz

Upvotes: 1

Views: 43

Answers (1)

Fussel
Fussel

Reputation: 1865

Unfortunally I was not able to come up with a working solution as I haven't used Angulars animations that much yet, but to your issue: animations are using a state to handle transitions and in your provided example each animation is working only once as each enters it's finished state after playing.

What I tried, but it's only partially working, is to reset animations when moving to the other direction. This works for positons 0 => 1 and 1 => 0 but if you move to position 2 you can only get back to position 1 but not 0 - no idea why.

public slideLeft(): void {
  console.log(`sliding from ${this.position} to ${this.position - 1}`);
  if (this.position > 0) {
    console.log(`playing left animation at ${this.position}`);
    let animation = this.leftAnimations[this.position];
    animation.play();
    this.position -= 1;

    // in slideRight use leftAnimations
    this.rightAnimations.forEach(a => a.reset());

    /* also tried it like that
    const pos = this.position;
    animation.onDone(() => {
      console.log(`resetting right animation at ${pos}`);
      this.rightAnimations[pos].reset();
    });
    */
}

Perhaps a better solution would be to define a state for each of your steps with transitions for each step so you can use a variable to define in which state your animation is. You would need to find a way how to programmatically bind a variable to your animation state which is normaly done by [@animationName]="variable".

Upvotes: 1

Related Questions