收藏
回答

animation 在隐藏后,不会再次执行动画的问题

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug animation 微信iOS客户端 7.0.7 2.8.3

组件在执行动画后隐藏组件,再次显示组件并且再次执行动画时 animation 会执行动作,但是没有动画效果。

必须重新执行一下重置的动画,才能再次执行动画。就我代码里注释的那一段。

为何要重新的把动画回到原处,才能执行下一次的动画,感觉完全没有必要啊?如果是差值问题,我寻思动画里最后也回到原处了呀?

代码很简单, 注释掉的那段就是解决方案。(顺便说下论坛编辑器里的插入代码格式都是乱的。。)

<view class="intro">

    <block wx:if="{{num <= 0}}">

        <view class="goumai" style="background-color:darkgray" >{{num}}</view>

    </block>

    <block wx:if="{{num > 0}}">

        <view class="goumai" animation="{{ani}}">{{num}}</view>

    </block>

    <button bindtap="jia">+</button>

    <button bindtap="jian">-</button>

</view>


js的代码


  jia:function(){ 

    var that = this;

    this.setData({

      num:that.data.num + 1

    });

    setTimeout(function () {

      var animation = wx.createAnimation({

        duration: 100,

        timingFunction: 'linear',

        delay: 0,

      });

      animation.translateY(6).step();

      animation.translateY(-6).step();

      animation.translateY(0).step();

      that.setData({

        ani: animation.export()

      });

    }, 100);

  },

  jian:function(){

    var that = this;

    if (that.data.num - 1 < 0return;

    this.setData({

      num: that.data.num -1

    })

    // setTimeout(function () {

    //   var animation = wx.createAnimation({

    //     duration: 100,

    //     timingFunction: 'linear',

    //     delay: 0,

    //   });

    //   animation.translateY(0).step();

    //   that.setData({

    //     ani: animation.export()

    //   });

    // }, 100);

  }


最后一次编辑于  2019-10-21
回答关注问题邀请回答
收藏

2 个回答

  • 禾店短剧系统
    禾店短剧系统
    2021-06-02

    在此之前,需要了解 存在“动画结束”这个事件,各个版本的浏览器监听的不同:

    var animations = {

         "animation": "animationend",

         "OAnimation": "oAnimationEnd",

         "MozAnimation": "animationend",

         "WebkitAnimation": "webkitAnimationEnd"

     }


    具体都是对应的什么浏览器大家自己去了解一下。

    所以给每一个span绑定监听事件就可以了:


    $(".st_apples span").each(function() {

         // 目前只设置兼容谷歌浏览器

         $(this)[0].addEventListener("webkitAnimationEnd",function(){

          // 动画结束就直接去除这个动画

             $(this).css("animation","");

         });

     });


    然后记得将上面的添加删除class的操作直接改为添加删除animation:


    $(".st_apples span[data-value="+remark+"]").css("animation","changeBg 3s linear");


    因为动画结束到监听事件的内部代码(去除动画)执行完成存在一定的延迟。所以如果你的代码中存在定时器,那么请将定时器的时间稍微设置的比动画时间大一点,我一般设置1秒。


    2021-06-02
    有用 1
    回复
  • 卢霄霄
    卢霄霄
    2019-10-21

    this.setData({

        num:that.data.num + 1    

    },()=>{

        动画代码

    })

    2019-10-21
    有用
    回复 10
    • White
      White
      2019-10-21
      这样写还是解决不了隐藏后无法再次正常执行动画的问题呀
      2019-10-21
      回复
    • 卢霄霄
      卢霄霄
      2019-10-21回复White
      https://developers.weixin.qq.com/s/UXNKIhm57kcx
      2019-10-21
      回复
    • White
      White
      2019-10-21回复卢霄霄
      是这样写没错,我的意思是为啥隐藏后要重新执行一次重置的动画呢?我的动画执行完也重新回到了原点了呀
      2019-10-21
      回复
    • 卢霄霄
      卢霄霄
      2019-10-21回复White
      只是还没有确定东西出来了,就设动画,是没效果的
      2019-10-21
      回复
    • White
      White
      2019-10-22回复卢霄霄
      我知道,但是就算这样写。再隐藏时都必须要再设置一次动画 animation.translateY(0).step(); 后面执行动画才有动画效果, 我一直没搞懂的是这个,这个应该算是bug了吧?
      2019-10-22
      回复
    查看更多(5)
登录 后发表内容
问题标签