Question

我正在尝试使用UI路由器向我的AngularJS页面添加页面过渡动画，但似乎没有添加ng-leave类，并且未触发leave方法。输入动画效果很好。

用于测试的代码：

// ...
.animation('.html-body', function(){
    return {
        enter: function(elem, done){
            console.log("enter");
            done();
        },
        leave: function(elem, done){
            console.log("leave");
            done();
        }
    }
});

在控制台中，只记录了“输入”，但点击链接时没有“离开”。

参考：
Full app.js; Base HTML; Other files;

Demo Plunk：http://embed.plnkr.co/82mXQqF0cie95RLCohNh/

<!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>

ngAnimate：在状态之间切换时不会触发`leave`

0 个答案: