Animating one specific ui-router state transition with ng-animate css

Question

I'm trying to create a simple login prompt animation when switching between a "login" state and a "main" state. Here's a plunker of what I'm trying to do: http://plnkr.co/edit/B0NOkcuamCPPeuSh6dAr?p=preview

I've looked far and wide for examples (and found some), but I have not been able to recreate it on my machine.

In my code, I'm injecting content into index.html like so:

<div ui-view class="login-screen"></div>

Because selecting this class from animations.css was the best I could do to even get an animation to run. What I'm trying to achieve is to have the animation only fire on the content in login.html, leaving the content in main.html untouched. I tried nesting states to recreate the linked example (he has a plunker that I tried to mimic), but without success - I don't really understand SASS/LESS well enough to say why it didn't work, but it seemed like I couldn't select the nested states via my CSS as there was no animation at all.

Currently it seems like the "login-screen" class is transferred to the "main" state, since the animation carries over. I can't figure out how to do this correctly and still be able to select it from the animation CSS.

Any tips would be greatly appreciated. Thanks!

Answer 1

After fiddling around for hours, it (seemingly) turns out that the problem is mainly about how to apply CSS selectors properly when injecting HTML, and certain css configuration.

Before any animations can be applied, one needs to define a transition rule for the parent element (in this case the div with the [ui-view] attribute). So this goes in animations.css:

[ui-view] {
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
  -o-transition: all 0.6s;
  transition: all 0.6s;
}

Then to select child div's (the ones we're injecting), the syntax goes like this:

[ui-view].ng-enter #login-screen {
    animation stuff;
}

Provided you've tagged your child div with id="login-screen", this rule will select the injected div and apply the animation to it when ngAnimate applies the ng-enter class. The same procedure applies to ng-enter-active, ng-leave etc.

The reason this took a while to figure out was 1) I did not RTFM, and 2) like it shows in the plunker, some animation is clearly possible without defining that transition rule. So, logically, I was focusing on the AngularJS and CSS selection parts as the points of failure. That wasn't obvious, but then again, RTFM.