Trigger animation on component when parameters change

Question

I'm trying to trigger an animation when the parameters for a component change, but can only make the animation execute for the first time the component is routed to. All subsequent navigations to that component with different parameters do not trigger the animation.

See this plunker, for example.

When navigating from

/home

to

/home/animated/1

the animation is executing. If only the ID changes, e.g.

/home/animated/2

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

Answer 1

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

I had a carousel that routed through the slides automatically:

Component.HTML: I had to wrap the div of the routed component in an animation

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

Then change the state when it routed to a new id and delay before changing the state back so that it can run again for the next slide.

Component.TS:

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

here is part of the animation this was using Animation.TS:

trigger('slideInOutAnimation', [

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

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

this way, when routing to a new id it changed the state to 'enter' let the animation run then changed the state back to 'new' so next route it would be able to run the animation again. home/component/1 => home component/2 etc