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

标签 javascript angularjs animation

我有 3 个部分 (div) - 我们将它们称为 #section1#section3。当页面加载时,由于 ngShow,#section1 是三个可见的唯一一个 - 我在 Controller 中有一个变量 visibleSection,其值为 1 23 来确定哪个可见。

我这里有一个 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/

相关文章:

javascript - ES6 Spread 运算符到 vanilla Javascript

angularjs - 如何在 Jasmine 和 Angular 中模拟 $http 超时

javascript - 选择选项中的 Ng-model

java - 通过热键执行相应操作时动画按钮

javascript - React Js - 以动态方式渲染 Lightbox 组件的问题

javascript - jsonp 最坏情况

javascript - 在 AngularJS 中使用 ng-style 和百分比值设置 HTML 元素宽度

ios - 绘制动画比对图像数组进行动画处理更有效吗?

iphone - 重复scrollView动画

Javascript:带有 document.activeElement 的变量