animation 在隐藏后,不会再次执行动画的问题
发布于 7 年前 作者 mengyang 13870 次浏览 来自 官方Issues

组件在执行动画后隐藏组件,再次显示组件并且再次执行动画时 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);

  }

1 回复

this.setData({

    num:that.data.num + 1    

},()=>{

    动画代码

})

回到顶部