javascript - ngAnimate: 在使用 ui-router 切换状态的时候 `leave` 事件没有被触发-PHP中文网问答

在使用 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>