使用ng-animate製作next/prev幻燈片的兩種不同動畫

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視圖中，該視圖根據你想要的轉換而改變。從控制器內部，您可以檢查是否單擊了「下一步」或「上一步」按鈕，並相應地設置轉換類。讓我們假設你定義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 {...} 

進一步閱讀

詳見this question。