Angularjs:ng-enter动画只触发一次

时间:2014-08-20 23:46:10

标签: javascript css angularjs animation ng-animate

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

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

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

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

如果我点击浏览器的后退按钮返回第一个局部视图,我仍然可以看到离开的动画,但我看不到其他局部视图的输入动画。

对于加载或渲染部分视图,我一定不理解......

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

1 个答案:

答案 0 :(得分:0)

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

要在上一个视图的离开动画后看到进入的动画,我不得不增加进入动画的animation-duration

500毫秒都不能工作。我不得不将离开动画保持在较低的持续时间(500毫秒),但是将输入的动画增加到1500毫秒或更高以便能够看到它。