Angular 2 Animate - No visible effect of the '* => void' transition when changing routes/components
Asked Answered
P

0

9

Using the Angular 2 Animate (RC2), with the help of official Docs, and the code used by Matias in the month old ng-conf animate video on YT channel.

I got everything working except the most crucial part:

I cannot seem to get the leaving transition/animation going when changing routerlinks/components. Using the '* => void' does not do anything. The router destroys the components in view without any regard to the animate leaving transition and introduces the new routerlink/component.

I get the entering animations to work, but not the leaving one.

I presume that router is not automatically detecting that there is a leaving animation for the component ( something similar to ng-leave ng-leave-active ), and thus I am missing a step, which is not a hack preferably.

All the plunker examples, official one and the ng-conf Matias one, are showing it all without any router interactions: all the enter/leave states & transitions examples are within the same component.

** Edit::: [Plunker Demo Here] http://plnkr.co/edit/IJoaB7ifVPJqX0NrUIpV

You will notice that even though the transitions '* => void' are specified, the router link changing completely ignores it

There is still basically no posts on ng2 animate so this is the only way.

Thank you for your time reading this. Appreciate the help.

Proparoxytone answered 19/6, 2016 at 7:18 Comment(5)
Can you post code?Etrem
@Etrem yep, here is the plunker: plnkr.co/edit/IJoaB7ifVPJqX0NrUIpV?p=preview You will notice that there are no exit animations, meaning * => void animation is completely skipped. How does that work now? ng1 sniffed for transition time and gave us a window for ng-leave / ng-leave-active animation. But there are no DOCS on this atm.Proparoxytone
This might interest you github.com/angular/angular/issues/9350#issuecomment-227354109Carmoncarmona
take a look at my answer here: https://mcmap.net/q/833059/-animating-transition-from-one-component-to-another-in-ionic-2Opera
Were you able to figure this out? I'm stuck on this as well.Fluorometer

© 2022 - 2024 — McMap. All rights reserved.