ui-router: ui-view incompatible with ng-class - ALL ng-class-based animations broken - 0.2.8 & 1.2.11

I’ve been following #320 for a few months, and although it was closed, unfortunately my comment on ng-class based animations was skipped over. I was hoping this was resolved with 0.2.8 but it is not.

CSS classes managed by ng-class conflict with ALL ui-view animations. This means you CANNOT use ng-class on a ui-view

The implications are pretty huge:

cannot change animations after bootstrap
cannot disable animations
cannot slide left/right depending on the app’s context (see examples below)

Expected results (working with ng-view)

<div ng-view class="firstAnimationClass ng-leave" ng-class="this.variable"> <div ng-view class="firstAnimationClass ng-enter" ng-class="this.variable"> or <div ng-view class="secondAnimationClass ng-leave" ng-class="this.variable"> <div ng-view class="secondAnimationClass ng-enter" ng-class="this.variable">

(firstAnimationClass/secondAnimationClass is assigned by ng-class=“this.variable”)

No matter how the dynamic class changes, both the entering and leaving view will have the same animation class

Actual results (using ui-view)

<div ui-view class="firstAnimationClass ng-leave" ng-class="this.variable"> <div ui-view class="secondAnimationClass ng-enter" ng-class="this.variable">

As soon as ng-class changes, the animation classes are out of sync and never get back in sync.

This situation should NEVER arise.

Code to reproduce

I have put together 2 plunkrs that are identical, except the first uses angular 1.2 ng-view, and the second uses ui-router/angular-1.2

working in ngRoute http://plnkr.co/edit/MLsgJiYXJ4EQ7OnmUQWB?p=preview

broken in uiView uiView: http://plnkr.co/edit/GYYKkBre9oZ4Yl2rcKdZ?p=preview

These should behave identically, it is the same code. But you will quickly see how animation classes get out of sync.

@nateabele you’ll remember my previous examples when I initially raised this, and above I’ve updated all the libraries 1.2.11 and 0.2.8

FYI I also recommend we close #862 in favour of this, as I believe it is the same bug (but a vague explanation)

About this issue

Original URL
State: closed
Created 10 years ago
Comments: 34 (6 by maintainers)

Links to this issue

angularjs - add a class to the ui-view based on the current state - Stack Overflow

Most upvoted comments

vvsreddy496 on Jan 24, 2017

We found a solution for this problem, pretty simple after all: Instead of putting the dynamic class directly onto the ui-view, just put it onto its parent and change the css accordingly. For example :

Instead of :

<body>
<div ui-view ng-class="myAnimation"></div>
</body>

put:

<body ng-class="myAnimation">
<div ui-view></div>
</body>

and in the CSS just target the direct childs instead of element :

.slideleft > .ng-leave { /* transition */ }`
.slideleft > .ng-leave-active { */ transition */ }

etc.

raffaelcavaliere on Sep 15, 2015