我有 3 个部分 (div) - 我们将它们称为 #section1
到 #section3
。当页面加载时,由于 ngShow,#section1
是三个可见的唯一一个 - 我在 Controller 中有一个变量 visibleSection
,其值为 1
、2
或 3
来确定哪个可见。
我这里有一个 JSFiddle,它是根据这些条件设置的。
https://jsfiddle.net/46x01Ldm/14/
但是,我正在寻找一种在您单击“下一步”或“上一步”时使各部分移动的方法。
当用户单击“上一页”时,我希望旧部分向右滑出,新部分从左侧滑入,就像用户用手指向右滑动一样。
当用户单击“下一步”时,我希望旧部分滑出到左侧,新部分从右侧滑入,如下如果用户用手指向左滑动。
我将如何实现这一目标?
非常感谢您的建议或帮助!我有 jQuery 和 animate.css 可以使用,如果有帮助的话。
最佳答案
鉴于您正在使用 animate.css,只需给出需要移出退出类之一的部分(例如 bounceOutLeft
)以及您想要移入其中之一的类入口类(如bounceInRight
)。
除此之外,为了跟踪用户正在查看的部分,我有一个变量来跟踪用户正在查看的部分。当用户按下下一个按钮时,我会向变量添加 1,而与上一个按钮相反,我会向变量添加 1。然后根据这个变量为你需要的子元素设置动画。
关于javascript - 在 AngularJS/ngAnimate 中显示/隐藏时向左/向右滑动动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37800660/