angularjs - 使用 ng-animate 为下一张/上一张幻灯片提供 2 种不同的动画

Question

在我的例子中，ng-view是一个带有箭头的滑块，用于显示下一个模板和上一个模板。目前它有一种类型的动画用于模板之间的过渡。

<div data-ng-view data-ng-animate="{enter: 'slide-forward-enter', leave: 'slide-forward-leave'}"></div>

我想扩展行为以根据单击的箭头执行不同的动画。单击“下一步”箭头应该执行slide-forward-enter&slider-forward-leave动画，而单击“上一个”箭头应该执行slide-reverse-enter& slider-reverse-leave。

如何做到这一点？

Answer 1

您可以向您的 ng-view 添加一个类，该类会根据您想要的转换进行更改。在您的控制器中，您可以检查是否单击了“下一个”或“上一个”按钮，并相应地设置转换类。假设您要定义 2 个不同的转换，“前进”和“后退”：

HTML

<div data-ng-view data-ng-animate="transitionClass"></div>
<button ng-click="slide('back')">Previous</button>
<button ng-click="slide('forward')">Next</button>

控制器

$scope.slide= function(myTransition) {
    $rootScope.transitionClass = myTransition;
}

CSS

.forward-slide-enter {...}
.forward-slide-enter-active {...}
.forward-slide-leave{...}
.forward-slide-leave-active {...}

.back-slide-enter {...}
.back-slide-enter-active {...}
.back-slide-leave{...}
.back-slide-leave-active {...}

进一步阅读

有关详细信息，请参阅此问题。