I'm playing around with animations between states with ngAnimate and ui-router. It seems to me like you can only trigger ngAnimate by setting a transition property on the element with the ui-view attribute (even though you might not be animating that element itself, but perhaps a child element).
The problem for me is that I only want some child elements in some templates to actually be animated. Of course, this is doable to some extent, but since I have to set a transition duration on the ui-view element, all state changes "lag" for this duration, even if animated children are not existent in the current state.
Below, I have included the code I'm currently dealing with. Notice that I do not want to animate .container itself, but rather .child:
.child {
transition: opacity 0.4s, transform 0.4s;
}
.container[ui-view].ng-enter,
.container[ui-view].ng-leave {
transition-duration: 0.4s; // Needed for ngAnimate to trigger
.child {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.container[ui-view].ng-enter-active
{
.child
{
transform: translate3d(30px, 0, 0);
opacity: 0;
transition: opacity 0, transform 0;
}
}
.container[ui-view].ng-leave-active
{
.child
{
transform: translate3d(-30px, 0, 0);
opacity: 0;
}
}
Now, my question is: say I am switching between two states with templates that do not even have the .child element, .container will still be "animated" (i.e. it will not actually animate anything, but ngAnimate will pause for the transition duration for eventual animations). Is there anyway I can only animate if the child elements have the transition property?
You can add a <style> tag inside the view that you want to disable the animation on:
<style>
main.ng-enter {
transition: 0.001s;
}
</style>
I used '0.001s' because setting it to '0s' or 'none' seems to disable the transitions for all views.
I've created a plunk showing this working at http://plnkr.co/edit/gbMHlY?p=preview, there are 2 tabs where only the first tab has a fade in transition.
The plunk is forked from a tutorial on ngAnimate with UI Router that I just posted.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments