javascript - Angular : ng-enter animation is only triggered once

Question

进入动画只在第一次触发。

我正在使用 Angularjs 1.2.22

给定这个 CSS :

.ng-enter {
    animation: bounceInUp 2s;
}

.ng-leave {
    animation: bounceOutUp 2s;
}

这条路线:

var app = angular.module('app', ['ngRoute', 'ngAnimate']);

app.config(['$routeProvider',
  function ($routeProvider) {
      $routeProvider.
        when('/horodateur/currentuser', {
            templateUrl: 'partials/horodateur/currentuser.html',
            controller: 'CurrentUserController'
        }).

        when('/horodateur/keypad', {
              templateUrl: 'partials/horodateur/keypad.html',
              controller: 'KeypadController'
        }).

        otherwise({
            redirectTo: '/horodateur/currentuser'
        });
  }]);

第一次显示局部 View ，我可以看到进入动画。

第一个局部 View 上的按钮将控制权交还给它的 Controller 以加载另一个 View :

app.controller('CurrentUserController', 
    function ($scope, $location) {
        $scope.showKeypad = function () {
            $location.path('/horodateur/keypad');
        }
    });

此时，我可以看到第一个局部 View 的离开动画。

然后，渲染第二个局部 View ，但这次没有进入动画。

如果我点击浏览器的后退按钮返回到第一个局部 View ，我仍然可以看到离开动画，但我看不到另一个局部 View 的进入动画。

一定是部分 View 加载或渲染我不明白...

有人知道我错过了什么吗？

Answer 1

我解决了我的问题。我只是不明白为什么...

要在前一个 View 的离开动画之后看到进入动画，我必须增加进入动画的 animation-duration。

两者都在 500 毫秒时不起作用。我必须将离开动画保持在较低的持续时间(500 毫秒)，但将进入动画增加到 1500 毫秒或更长的时间才能看到它。