带有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＆amp; slider-forward-leave动画，点击“上一页”箭头时，应执行slide-reverse-enter＆amp; slider-reverse-leave。

如何实现这一目标？

Answer 1

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

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

进一步阅读

有关详细信息，请参阅this question。