在使用 ui-router 作为路由的时候,ngAnimate 的状态切换触发事件只触发了 enter
事件,而没有触发 leave
事件。
测试用代码:
// ...
.animation('.html-body', function(){
return {
enter: function(elem, done){
console.log("enter");
done();
},
leave: function(elem, done){
console.log("leave");
done();
}
}
});
观察 console 可知,在不同状态之间切换时,只有 enter
项计入日志,leave
项没有出现。
演示用 Plunk: http://embed.plnkr.co/82mXQqF...
<!DOCTYPE html>
<html ng-app="demoapp">
<head>
<base href="/">
<script data-require="angular.js@<2" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
<script data-require="ui-router@0.3.1" data-semver="0.3.1" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-animate.min.js"></script>
<script>
var app = angular.module('demoapp', [
'ui.router', 'ngAnimate'
]);
app
.config(function($locationProvider, $stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
var nav = '<a ui-sref="home">Home</a> <a ui-sref="about">About</a> <p>Check your console for logs.</p>';
$locationProvider.html5Mode(true);
$stateProvider
.state('home', {
url: '/',
template: "<h1>Home</h1>" + nav,
})
.state('about', {
url: '/about',
template: "<h1>About</h1>" + nav,
})
});
app
.animation('.html-body', function() {
return {
enter: function(elem, done) {
console.log("enter", elem);
done();
},
leave: function(elem, done) {
console.log("leave", elem);
done();
}
}
});
</script>
</head>
<body ng-view ui-view class="html-body">
</body>
</html>