ui-router animations only on certain elements

thefone

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?

Jason

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.

edited at
0

Comments

0 comments
Login to comment

Related

Array Only Prints Certain Elements and Not Others

Angular UI-Router ui-sref ignore some elements

How to attach navbar only on certain pages using ui-router?

SCSS/CSS Using :not selector for only certain elements

Jquery UI animations do not occur on hidden elements

jQuery how to removeClass of only certain elements

Filter elements with a regex, only if they are in a certain block

Only allow scrolling to stop on certain elements

Only toggle certain elements based on class

Angular7 router-outlet animations skews and rearranges all elements making a mess

Is there a way to update only certain elements in an EnvironmentObject

xsl:number only elements with a certain value

Vue Router access route only from certain page

Disable jQuery UI Tooltips except for certain elements

Wrap items only if they are two certain elements

Select full tree and only certain child elements

AngularJS animations with ui router not working

Only print elements with a certain class in nested divs

Overflow only certain elements

AngularJS $sce only trust certain elements

AngularJS displays only elements that meet a certain condition

How to apply rules to only certain elements in array

Permute only certain elements in an array in python

PHP for each Loop return only certain elements

Initialize only certain elements of array in dzn file

Using foreach to show only certain elements in a list

Selenium only finding certain elements in Python

Find only certain elements in table with Beatiful soup

Reverse the order of only certain Div children elements