收藏
回答

小程序的animation 无法作用在 动态渲染出来的view上是怎么回事?

***************wxml****************
<block wx:for="{{list}}">
<view class="box" animation="{{animationData}}"></view>
</block>
***************js********************
Page({
    list:{},\\list为 wx.request调用接口返回的列表,可正常展示,这里省略内容
    animationData:{},
  },
onShow(){
  var animation = wx.createAnimation({
    duration: 2000,
    timingFunction: 'ease',
  })
 
  this.animation = animation
 
  animation.translate(30).step()
 
  this.setData({
    animationData: animation.export()
  })
},
});
 
*****************wxss***************
.box{
width:100px;
height:100px;
}

这段代码是 需要遍历list然后渲染一堆 class="box"的view控件,但是动画过程没有效果,只有动画的最终效果,view向右平移30px;

另一个情况是我把这个动画效果添加到静态资源上就可以出来效果,我之前加在了一幅图片上,就出现了图片缓慢平移的动画效果.但是加在动态数据上就没有过程效果,不知道什么情况,求大佬解答

最后一次编辑于  11-20
回答关注问题邀请回答
收藏

1 个回答

  • 卢霄霄
    卢霄霄
    11-20

    要确保渲染上之后,再设置动画才行

    11-20
    赞同 1
    回复 10
    • 眼神深邃狗
      眼神深邃狗
      11-20
      我把动画效果写在了onshow里面也不可以吗?onready也试过了,都没有动画过程,只有动画结果
      11-20
      回复
    • 卢霄霄
      卢霄霄
      11-20回复眼神深邃狗
      1、小程序的 createAnimation 实质上是用的 transition
      2、list你是动态加载的,请在 this.setData({list},()=>{这个地方}) 设上动画
      11-20
      回复
    • 眼神深邃狗
      眼神深邃狗
      11-20回复卢霄霄
      好的多谢,我试试
      11-20
      回复
    • 卢霄霄
      卢霄霄
      11-20回复眼神深邃狗
      好的 如果还不行的话 可以做个代码片段
      11-20
      回复
    • 眼神深邃狗
      眼神深邃狗
      11-20回复卢霄霄
      https://developers.weixin.qq.com/s/b89Hu1mz76dT
      11-20
      回复
    查看更多(5)
问题标签