收藏
评论

css transition 属性在小程序里需要注意的地方

场景:我给image设置了两个状态,对应不同的filter:blur(),并习惯性地想通过transition去过渡filter的值。 问题:在开发者工具模拟时很流畅,效果很好,在android却很卡顿,效果不好,在ios端就更卡了,还会造成微信闪退。 解决方案:通过css动画去实现过渡效果在各端都会很流畅。但为什么transition会卡呢,这个有待进一步研究。

最后一次编辑于  2018-09-28  (未经腾讯允许,不得转载)
复制链接收藏赞 0

13 个评论

  • 卢霄霄
    卢霄霄
    2018-09-27

    不只是filter这个样式,transition很多情况都很卡。。确实怪怪的

    2018-09-27
    赞同
    回复 10
    • Hoo
      Hoo
      03-15

      关于transition过渡有什么好的替代方案吗 我用transition过渡translateY属性   一开始是在小程序页面上写的 真机看很流畅 后来把那部分封装成了一个组件后在刚进入页面执行的时候会特别卡 但就仅仅是刚进入页面的时候执行动画卡顿 当我点击关闭按钮后去掉控制动画的类名 再点击另一个按钮添加上控制动画的类名 这时transition过渡就很流畅 为什么呢 是和我的自定义组件有关吗?

      03-15
      回复
    • 卢霄霄
      卢霄霄
      03-18回复Hoo

      建议不要放到页面的初次渲染里,放到 ready里 ,如果还是卡 可以稍微setTimeout一下,如果还是卡,可以做个片段我帮你看看

      03-18
      回复
    • Hoo
      Hoo
      03-18回复卢霄霄

      我的动画是在自定义组件里写的

      03-18
      回复
    • 卢霄霄
      卢霄霄
      03-18回复Hoo

      组件里也有ready这个生命周期啊 另外可以试试组件也写上  "usingComponents":{}

      03-18
      回复
    • Hoo
      Hoo
      03-18回复卢霄霄

      我的动画卡顿好像是因为我在引用组件的页面 频繁的setData传递给组件的数据 只要一触发setData(传递给组件的数据) 就会导致动画卡顿 可是我组件里的数据需要频繁的setData来获取后台最新的数据

      03-18
      回复
    查看更多(5)
  • 顺。
    顺。
    2018-09-28

    原来过度transition 很流畅的,后面微信更新后不懂为什么,只要动画小于1S的就会和没有过渡一样,然后时间设长后,在结束的一瞬间会跳一下,立即结束。如果是设置位置发生变化的过渡看起来就特别明显。


    2018-09-28
    赞同
    回复 1
    • 顺。
      顺。
      2018-09-28

      ios下测试,电脑调试的编辑器上看不会

      2018-09-28
      回复