在AngularJS/ngAnimate中顯示/隱藏時動畫滑動左/右

Question

我有3個部分（div） - 我們將其稱爲#section1至#section3。當頁面加載時，由於ngShow，#section1是三個可見狀態中的唯一一個 - 我在控制器中有一個變量visibleSection，其值爲1,2或3以確定哪個可見。

我在這裏有一個JSFiddle與這些條件設置。
https://jsfiddle.net/46x01Ldm/14/

但是，我正在尋找的是一種在單擊「下一步」或「上一步」時使部分移動的方法。

當用戶點擊「前一個」時，我想讓舊部分向右滑動並且新部分從左側滑入，就好像用戶用手指向右滑動一樣。

當用戶點擊「下一步」，我想老款滑出到左和新節從右滑動，就好像用戶已經刷到左用他們的手指。

我該如何去實現這一目標？

非常感謝您的任何建議或幫助！如果有幫助，我有jQuery和animate.css可以使用。

Answer 1

考慮到您正在使用animate.css，只需給出需要移出其中一個出口類（如bounceOutLeft）和您想在其中一個入口類中移動的類的部分（如bounceInRight ）。除此之外，爲了跟蹤用戶正在看哪個部分，我會有一個變量來跟蹤用戶正在看哪個部分。當用戶按下下一個按鈕時，我會將1加到變量上，而對於上一個按鈕則加1。然後根據此變量爲您需要的孩子製作動畫。