AngularJS：ng-enter动画仅触发一次

debugcn 发表于 Dev

用户名

输入动画仅在第一次触发。

我正在使用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'
        });
  }]);

在第一次的局部视图所示，我可以看到进入的动画。

该第一个局部视图上的按钮将控制权交还给它的控制器，以加载另一个视图：

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

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

然后，渲染第二个局部视图，但是这次没有输入动画。

如果单击浏览器的“后退”按钮以返回第一个局部视图，则仍然可以看到离开动画，但是看不到另一个局部视图的进入动画。

局部视图加载或渲染一定是我不了解的...

有人知道我在想什么吗？

用户名

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

要在上一个视图的离开动画之后查看进入动画，我必须扩大animation-duration进入动画的。

两者都在500毫秒都无法正常工作。我必须将离开动画的时间保持在较短的时间（500毫秒），但将进入的动画增加到1500毫秒或更高才能看到它。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。