在AngularJS / ngAnimate中显示/隐藏时动画左/右滑动

时间:2016-06-13 23:22:12

标签: javascript angularjs animation

我有3个部分(div) - 我们将for index,row in enumerate(df[column_with_urls][:-1]): if 'yandex.ru/search' in row: print df[column_with_urls][index+1] == 'yandex.ru' 称为#section1。当页面加载时,由于ngShow,#section3是三个中唯一可见的一个 - 我在控制器中有一个变量#section1,其值为visibleSection12确定哪个可见。

我在这里有一个JSFiddle设置了这些条件 https://jsfiddle.net/46x01Ldm/14/

然而,当我点击“下一步”或“上一页”时,我正在寻找的方法是让部分移动。

当用户点击“上一个”时,我希望旧部分向右滑动,新部分从左侧滑入,就像用户用手指向右滑动一样。

当用户点击“下一步”时,我希望旧部分滑出,新部分从右侧滑入,如如果用户用手指轻扫

我将如何实现这一目标?

非常感谢您的任何建议或帮助!我有jQuery和animate.css可以使用,如果有帮助的话。

1 个答案:

答案 0 :(得分:1)

鉴于您正在使用animate.css,只需提供需要移出其中一个退出类(如bounceOutLeft)的部分以及您要在其中一个入口类中移动的类(如bounceInRight)。

除此之外,为了跟踪用户正在查看哪个部分,我还有一个变量可以跟踪用户正在查看的部分。当用户按下下一个按钮时,我会向变量添加1,而与前一个按钮相反。然后根据此变量为您需要的孩子设置动画。