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

Question

在我的例子中，ng-view 是一个带有箭头的 slider ，用于显示下一个模板和上一个模板。目前它有一种用于模板之间转换的动画。

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

我想扩展行为以根据单击的箭头执行不同的动画。单击“Next”箭头应执行 slide-forward-enter 和 slider-forward-leave 动画，而单击“Previous”箭头应执行 slide -reverse-enter 和 slider-reverse-leave。

如何实现？

Answer 1

您可以将一个类添加到您的 ng-view 中，该类会根据您想要的转换而变化。在您的 Controller 中，您可以检查是否单击了“下一步”或“上一步”按钮，并相应地设置过渡类。假设您要定义 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>

Controller

$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 {...}

进一步阅读

参见 this question了解详情。