基本上有没有一种简单的方法来利用ng-repeat 指令上的ng-enter 和ng-leave 钩子来左右动画基本滑块？
您可以看到 plunk here 几乎可以正常工作了。
我有一个基本滑块，它使用分区过滤器和ng-repeat 一次一页地在元素列表中转换。这可以按预期工作，除非您切换方向，在这种情况下，前一个方向上的 ng-leave 转换运行会导致错误结果。
我可以编写自定义滑块指令，甚至可以使用 angular-ui 轮播，但如果确实存在简单的解决方案，我不想让这样一个简单的示例过于复杂。任何帮助将不胜感激。
【问题讨论】：
标签： angularjs ng-animate
此屏幕截图显示了问题，并指出了解决方案。
传递给动画离开函数的元素具有旧的类值。
奇怪的是，我无法复制此屏幕截图，因为 $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，但没有它也可以轻松完成。
【讨论】：
angular-animate 可能会影响应用程序中的其他 leave 动画，并且还意味着您无法在不进行相同更改的情况下更新到新版本。我希望有一个简单的解决方案，也许没有。
addClass 和removeClass，因此不需要jQuery，因为它们已经在element 对象上可用。要删除对$rootScope 的任何引用，可能需要一个简单的提供程序，以便在配置阶段提供方向。在这种情况下使用$rootScope 真的那么“糟糕”吗？再次欢呼。
ng-enter钩子（ng-repeat，ng-switch）的每个元素上的动画。在动画期间在装饰器中设置$timeout 以取消设置$rootScope.direction 可以工作，但看起来非常hacky，并且可能会在短时间连续触发多个动画时导致问题。有什么想法吗？
这是一个如何与 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-repeated 项目使用 fx-fade-down 效果，并“缓和”反弹。
另外“请注意，ng-repeat 不会在页面加载时触发动画，您正在迭代的集合必须首先为空然后填充，您可以通过简单的超时或其他一些异步操作来实现这一点”：
angular.module('foodApp', ['ngAnimate', 'fx.animations'])
.controller('FoodController', function($scope, $timeout){
$timeout(function(){
$scope.foods = ['apple', 'muffin', 'chips'];
}, 100);
});
【讨论】：
ng-fx 如何解决这个特定问题，它可以在进入和离开时应用动画，但我需要不基于静态类的不同动画。是否可以修改 Plunk 以显示您的意思？我希望只使用 CSS 动画，而不必包含 GSAP 库（不过我知道它的优点），但如果可以应用，我很高兴考虑这一点，干杯。