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
Post a Comment