收藏
回答

微信小程序长页面animation动画加载问题请教?

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

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

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

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

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

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


最后一次编辑于  08-03  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

11 个回答

  • 卢霄霄
    卢霄霄
    08-03

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

    用相交状态监听和 transition 来做

    08-03
    赞同 11
    回复 8
    •  
       
      08-06
      感谢你的指教,不知道是我没看懂还是...我想要的是在同一页面实现加载CSS动画。
      08-06
      赞同
      回复
    • 卢霄霄
      卢霄霄
      08-06回复 
      默认加上transition 下滑到元素能看见了,就给他加上 opacity和translate样式。
      08-06
      赞同
      回复
    •  
       
      08-06
      没太明白意思,可否来段代码示例学习学习
      08-06
      赞同
      回复
    • 卢霄霄
      卢霄霄
      08-06回复 

      https://developers.weixin.qq.com/s/M6Yk1pmV7daA

      08-06
      赞同 11
      回复
    •  
       
      08-07
      这种太复杂了,页面元素多,动画也不同。每个都得给两个属性......
      08-07
      赞同
      回复
    查看更多(3)
  • 铭锋科技
    铭锋科技
    08-03

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

    08-03
    赞同
    回复 1
    •  
       
      08-03
      怎么实现,给个代码看看。动画都不一样的。
      08-03
      赞同
      回复