Question

如果有人能看一眼，我将非常感激。这是一个非常简单的角度幻灯片放映使用angular.enter和angular.leave，但ng-enter和ng-leave之间有一个延迟，我无法摆脱。目前ng-finish必须在ng-enter进入之前完成，但我希望这两个动画同时发生。

http://plnkr.co/edit/fqJOYxcSR2wO5g7LPQNy?p=preview

JS：

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

myApp.controller('sCtrl', function($scope) {$scope.clicks = 0});

myApp.directive('slidesDirective', function ($animate) {
    return  function (scope, element, attr) {

            // Sets up and animates the first slide
            var e1 = angular.element('<div class="slide"><br>Odd Slide<p>Click Me</p></div>');
            var e2 = angular.element('<div class="slide"><br>Even Slide<p>Click Me</p></div>');

            $animate.enter(e1, element);

            // Checks if the click counter value has changed. 
            scope.$watch('clicks', function(val) {

              if (val) {

                 if (val % 2 === 0) {

                   $animate.leave(e2);
                   $animate.enter(e1, element);

                  } else {
                    $animate.leave(e1)
                    $animate.enter(e2, element);

                   }
              }
            })
    };
});

HTML：

<div ng-click="clicks = clicks + 1" class="slides" slides-directive></div>

Answer 1

我已经改变了动画CSS，以实现我认为你所要求的。我将其中一个DIV设为绿色以说明动画。

http://plnkr.co/edit/MED5NRJLiBfEaeuCNl3L?p=preview

如果这不是你想要的，请告诉我。

Angular $ animate - ng-enter和ng-leave之间的延迟 - 不确定为什么？

1 个答案: