Hi all,
I'm using ngAnimate and css transition to create animation. Say I have a
common view that would use different transition style (e.g. slide-left,
slide-right..) based on the routing state (using ui-router).
<!--the view-->
<div ui-view class="{{transitionStyle}}"></div>
//app.js
angular.module('myApp', ['ui.router', 'ngAnimate'])
.config(function($stateProvider){
$stateProvider
.state("list", {
url:'/list',
template:'<button ng-click="goToQuery()">Query</button>',
controller: function($state, $rootScope){
$scope.goToQuery = function(){
$rootScope.transitionStyle = "slide-left";
$state.go("query");
}
}
})
.state("query", {
url:'/query',
template:'<button ng-click="goToList()">List</button>',
controller: function($state, $rootScope){
$scope.goToList = function(){
$rootScope.transitionStyle = "slide-right";
$state.go("list");
}
}
});
});
//CSS
.slide-left.ng-enter { ... }
.slide-left.ng-leave { ... }
.slide-left.ng-enter-active { ... }
.slide-left.ng-leave-active { ... }
.slide-right.ng-enter { ... }
.slide-right.ng-leave { ... }
.slide-right.ng-enter-active { ... }
.slide-right.ng-leave-active { ... }
When switching state, I would change the `transitionStyle` to different css
classes to use different transition style. But I would also like to clear
the `transitionStyle` when the animation is done, as this view is the main
view that will also be used by others. Currently ngAnimate is pretty
transparent that I do not need to configure it. Is there anyway I can hook
some callback or event to check when transition ended so that I would clear
the `transitionStyle` globally?
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.
