收藏
回答

条件渲染wx:if与关键帧动画this.animate搭配的效果问题?

当使用wx:if搭配this.animate实现展示动画的时候遇到了一个问题:

假设需要实现view展示时由0放大至1

<view id="1" wx:if="{{show}}" ></view>


点击回调将会有如下步骤:

一、设置data状态(wx:if)

this.setData({{show: true}})


二、设置动画(this.animate)

this.animate('#1', [
  {ease: 'ease', scale: [0, 0], opacity: 0},
  {ease: 'ease', scale: [1, 1], opacity: 1},
], 300)


这样实现有一个问题:data的变化驱动wx:if渲染完成后,this.animate还没有开始执行,导致元素先由不展示过度到展示,接着再由展示过度到缩放0,最后再由缩放0过度到缩放1,这个过程将会导致肉眼可见的元素闪烁,真机测试下,大概十次会有超过一半的概率出现闪烁,且首次渲染基本100%出现。

很好奇this.animate为何会延迟这么久执行,不应该是setData后立即就执行动画了吗?

补充:我知道展示动画可以直接用CSS来实现,但CSS会覆盖所有场景的展示,而有些特定场景下是不期待动画的,这也是为什么一开始想要通过this.animate来实现的原因。(尽管可以通过设置变量来控制不同场景下的class,但这显然让代码变得更复杂)


难受。

回答关注问题邀请回答
收藏

2 个回答

  • Frank
    Frank
    2022-10-24

    https://developers.weixin.qq.com/community/develop/article/doc/0008c4943b0648ec6e3e9206a5e413,参考下这篇文章,盲猜原理应该是一样的吧

    2022-10-24
    有用 1
    回复 1
    • 从君华
      从君华
      2022-10-24
      这个好像是处理元素隐藏的,隐藏确实要先执行动画,动画完毕后再setData。


      但我这里是展示阶段的动画。
      关键在于我这个思路,有的元素不闪烁,有的闪烁,所以才发这篇帖子出来交流一下,感觉这个思路应该没问题吧,但关键帧动画延迟得似乎太久了。
      2022-10-24
      回复
  • 从君华
    从君华
    2022-10-24

    最终还是采用了「展示CSS,隐藏this.animate」的组合,使用变量控制具体场景下的class

    .show {
      animation: show .3s;
    }
    @keyframes show {
      from {
        transform: scale(0, 0);
        opacity: 0;
      }
      to {
        transform: scale(1, 1);
        opacity: 1;
      }
    }
    


    <view
      class="{{condition ? 'normal show' : 'normal}}"  
    />
    


    2022-10-24
    有用
    回复
登录 后发表内容