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?

any update on it ?

Muhammad Furqan
– Muhammad Furqan

2017-07-29 14:37:01 +00:00
Commented Jul 29, 2017 at 14:37 — Muhammad Furqan
– Muhammad Furqan, Commented Jul 29, 2017 at 14:37

TylerT · Accepted Answer · 2018-02-06 13:45:40Z

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

Collectives™ on Stack Overflow

Trigger animation on component when parameters change

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related