CSS3动画如何设置滑动到当屏的时候才触发动画播放

Posted 2023-03-30

http://115.28.58.47/7e/seasonfair/plugin/92/index.html?p=2

如上面的例子（请用手机打开或者用chrome手机模拟器打开），当用手指向右滑动到下一页的时候，下一页会有相应的动画出现，我要问的是“如何设置来触发这个动画播放”。

我现在做出来的效果是实现了动画的效果，但在第一页的时候就已经把后面的所有的动画都同时播放了，等于是后面的动画都没有了。我要解决在第一页的时候只播放第一页的动画，第二页及后面的动画是出于初始阶段不播放动画，等我滑动到第二页的时候才开始播放第二页的动画，第三页及后面的动画播放，以此类推。请高手赐教。

参考技术A

像这种效果，你要想知道，

已经下载下来，你拆开看一下就知道了。

说说原理，这里并不是纯css3，，只是用css3定义好动画，

@-moz-keyframes tips
0% box-shadow: 0px 0px 0px #f00;
25% box-shadow: 0px 0px 8px #f00;
50% box-shadow: 0px 0px 0px #f00;
100% box-shadow: 0px 0px 8px #f00;

然后，js在切屏后，用Js来触发这一个样式，这个样式调用了刚才定义的动画。

.tips
-webkit-animation:tips 1s;
-moz-animation:tips 1s ;

当然css3是可以做的，只是用纯css3，就没办法像这样可以拖动切屏，这个是需要js或者jq来完成。。。

追问

对JS不太熟悉，还是没弄懂，大侠能帮人帮到底吗？加我QQ：273387276 发文件给你帮我弄一下？

这要求是有点过分，但实在找不到办法，老板在往死力摧要弄出来，被逼疯了

追答

这不是已经把文件发在这里了吗？

直接用就行了。。。。

在Vue中使用GSAP完成动画（四）播放组件

参考技术A

控制动画往正方向播放，可设定开始的时间点。

如果 suppressEvents 保持默认状态并跳到新的时间点，那么之前在新旧时间点之间设置的回调或函数不会被触发，相当于跳过了那些时间点。如果想触发，设为false。

暂停动画，可选择跳转到特定时间。

如果 suppressEvents 保持默认状态并跳到新的时间点，那么之前在新旧时间点之间设置的回调或函数不会被触发，相当于跳过了那些时间点。如果想触发，设为false。

获取或设置动画的暂停状态，该状态指示动画当前是否已暂停。

重新开始动画/重头开始。

恢复播放而不改变方向（前进或后退），可选择首先跳到特定时间

与 play() 的区别就是它可以后退

控制动画反向播放。动画的各种表现都会反转，例如ease

获取或设置动画的反转状态，指示是否应该反向播放动画

不改变状态（播放、暂停、方向）的情况下直接跳转到某个时间点

获取/设定动画速度，默认为1。

例如0.5为慢速，2为快速。

如果设置则返回此动画实例便于链式调用。如不设置则返回时间调节比例。