微信小程序长页面animation动画加载问题请教？
发布于 6 年前 作者 usu 989 次浏览 来自 官方Issues

前端不是很会，请教一下。

给页面（长页面）加载了许多动画，进入页面后动画就一次全加载了。还没进入视窗的元素上的动画也全加载了。

.元素名称{animation:1s ease1.2s1 normal both running fadeInLeft;}

[@keyframes](/user/keyframes) fadeInLeft {0% {opacity:0;transform: translate3d(-10rem,0,0);} 100%{opacity:1;transform:none;}}

有二十多个元素，因此下边的元素不在视窗。但进入页面动画就一次全都加载完了。用的是CSS写的动画

请教怎样让动画元素进入视窗才开始运动？？？

3 回复

你之前不是发了个帖子吗。。。我给你给了个片段。。你又把帖子删了。。

用相交状态监听和 transition 来做

使用这个API wx.pageScrollTo  获取页面的滚动距离 例如当滚动距离等于100(你需要加载动画的位置的时候)  然后给需要做动画的元素添加一个动画类名就可以实现了 ，这种方法需要判断、添加类名很多次。你可以把要做动画的距离和写好的动画类名做数组 循环添加就好了。后续维护直接修改数组就好了，非常方便。本人更倾向于第二种。

页面滚动到某一点的时候再给对应的元素加上动画类

回到顶部