在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。然后根据此变量为您需要的孩子制作动画。