Trigger animation of a component when changing parameters

Question

I try to call an animation when changing the parameters for a component, but can only do the animation the first time the component is redirected. All subsequent navigation to this component with different parameters does not cause animation.

See this plunger , for example.

When navigating with

/home

to

/home/animated/1

animation is in progress. If only the identifier changes, for example

/home/animated/2

nothing happens at all. What am I missing or is this intentional behavior?

Answer 1

I also ran into this problem if someone knows why please help - My solution:

I had a carousel that automatically went through the slides:

Component.HTML: div

<div [@slideInOutAnimation]='mainState'></div> 

, , .

Component.TS:

this.mainState = 'enter';
var delayAnim = setTimeout(() => {
this.mainState = 'new';
},3000)

, Animation.TS:

trigger('slideInOutAnimation', [

    state('new', style({
        ...
    })),

    transition('* => enter', [
    ...style...animate...
    ])

, 'enter', , "", . home/component/1 = > /2 etc