AngularJS动画基本ng-repeat滑块

Question

基本上有一种简单的方法可以利用ng-enter指令上的ng-leave和ng-repeat挂钩来左右滑动基本滑块吗？

您可以看到 plunk here ，它几乎正常运作。

我有一个基本滑块，使用分区过滤器和ng-repeat一次一页地转换元素列表。这可以按预期工作，除非您切换方向，在这种情况下，前一个方向上的ng-leave转换会运行，从而导致错误的结果。

我可以编写一个自定义滑块指令，甚至可以使用angular-ui轮播，但如果确实存在一个简单的解决方案，我不想过于复杂这么简单的例子。任何帮助将不胜感激。

Answer 1

此屏幕截图显示了问题，并指出了解决方案。

传递给动画离开函数的元素具有旧的类值。

奇怪的是，我无法复制此屏幕截图，因为$scope神秘地变得不可用。 $rootScope始终可用。但似乎你可以在不注入$rootScope的情况下做到这一点。

我的解决方案是：

像这样装饰$animate.leave函数：

.config(function($provide) {
    $provide.decorator("$animate", function ($delegate, $rootScope) {
        $delegate.originalLeave = $delegate.leave;
        $delegate.leave = function (element, doneCallback) {
            // THIS IS THE ADDITIONAL FUNCTIONALITY
            $(element).removeClass("right").removeClass("left").addClass($rootScope.direction);
            $delegate.originalLeave(element, doneCallback);
        };
        return $delegate;
    });
})

然后将direction变量放在$rootScope上，这当然需要注入控制器。

这个解决方案需要jQuery，但没有它就可以轻松完成。

Here is the working Plunker

Answer 2

使用ng-fx!可以找到文档和安装说明here

以下是如何与ng-repeat一起使用的示例：

<ul ng-controller="FoodController">
  <li class='fx-fade-down fx-speed-800 fx-easing-bounce' ng-repeat="food in foods">
    {{ food }}
  </li>
</ul>

这将在800毫秒内对ng重复项目使用fx淡出效果，并使用“缓动”功能。反弹

此外＆＃34;请注意，ng-repeat在页面加载时不会触发动画，您正在迭代的集合必须先为空，然后填充，您可以通过简单的超时或其他一些异步操作实现此操作＆＃34 ; ：

angular.module('foodApp', ['ngAnimate', 'fx.animations'])
.controller('FoodController', function($scope, $timeout){
  $timeout(function(){
    $scope.foods = ['apple', 'muffin', 'chips'];
  }, 100);
});