微信小程序循环列表添加动画animation

微信小程序内的css无法做到循环的动态
animationData变成[]，数组里很多{}对象，就可以改变单独的值。

WXML:

<view class="context-full">
    <block wx:for="{{axis}}" wx:key="id" wx:for-index="idx">
        <view data-id='{{idx}}' class="history-item" animation="{{timeLineAnimationData[idx]}}">
            <view class="year"><text>{{item.time}}</text></view>
            <view class="gradient">
            </view>
            <view class="circle" >
                <view class="point"></view>
            </view>
            <view class="item-detail">
                <text>{{item.event}}</text>
            </view>
        </view>
    </block>
 </view>

JS:

Page({
  data: {
  	timeLineAnimationData: [],
  },
  methods:{
  //循环的key值为id,arrName为该循环绑定的数据，因为页面中有多个表单需要加动画
		animateArr: function (id,arrName) {
    var index = id
    var temp_str = arrName+'[' + index + ']';//判断当前点击的 animationData相对应的{}是否为空,如果为空就是走第一个动画,不为空走第二个
    if (JSON.stringify(this.data[arrName][index]) != "{}") {
      let animation = wx.createAnimation({
        duration: 100,
        timingFunction: 'ease',
      })
      this.animation = animation  
      animation.opacity(1).step()
      this.setData({
        [temp_str]: animation.export()
      });//这个是为动画运行赋值,也就是返回初始状态的
      this.setData({
        [temp_str]: {}
      });//这个是动画返回到初始后将这个animationData相对应的对象值清空,下次就会走第一个动画,不要直接清空,没有效果
    } else {
      let animation = wx.createAnimation({
        duration: 100,
        timingFunction: 'ease',
      })
      this.animation = animation
      animation.opacity(1).step()
      this.setData({
        [temp_str]: animation.export()
      });
    }
    console.log(this.data[arrName]);

  },
	},
})

使用示例：

this.timeTimer = setInterval( ()=> {
//id==数组的长度
    if(id === 9){
      clearInterval(this.timeTimer)
    } else{
      this.animateArr(id,'timeLineAnimationData');
      id++
    }
  }, 500)

axis数组格式

axis:[
{id:1,time:123,event:'123'},
]