angularjs - Apply a state class to ui-view to allow different ng animation -


i need apply different animations depending on current state using ui-view. following on this question..

i have following code (edit: see plunker preview)

<section ui-view ng-class="stateclass"></section> 

stateclass gets applied in each controller e.g:

.controller('logincontroller', function($scope, $state) {   // set state class name   $scope.stateclass = 'slide-left';   console.log($scope); 

this works , class gets added fine - animation wont kick in.

if update ui-view code to:

<section ui-view class="slide-left"></section> 

with class hardcoded, works (but can't apply different animations).

does ng-class added after ng-enter? can suggest how achieve animations?

edit>> oddly enough ng-leave animations work fine. css still doesn't apply ng-enter

add ui-view following directive state-class:

.directive('stateclass', ['$state', function($state) {     return {         link: function($scope, $element, $attrs) {             var statename = $state.current.name || 'init',                 normalizedstatename = 'state-' + statename.replace(/\./g, '-');             $element.addclass(normalizedstatename);         }     } }]); 

on ng-enter, newly created element add current state name (the state ui-view makes transition to). element going disappear state remains same created before.

for example:

the transition main modal state:

phase 1: main state active:

<ui-view state-class class="state-main ng-scope"></ui-view> 

phase 2: run $state.go('modal');

<ui-view state-class class="state-modal ng-animate ng-enter ng-enter-active"></ui-view> <ui-view state-class class="state-main ng-animate ng-leave ng-leave-active"></ui-view> 

phase 3: modal state active

<ui-view state-class class="state-modal"></ui-view> 

Comments

Popular posts from this blog

node.js - Mongoose: Cast to ObjectId failed for value on newly created object after setting the value -

gradle error "Cannot convert the provided notation to a File or URI" -

python - NameError: name 'subprocess' is not defined -