uniapp中for循环动画 animation问题

uniapp 官方例子中是一个单独的animation的例子，

实际开发中，可能会遇到很多for 循环出来的 要写动画的情况，今天遇到插件作者，特此来记录，也是给我一个开发思路，很不错

<view class="" style="height: 1000px;">
	<view class="" v-for="(item,index) in list" :key="index">
		<view style="background:red;height:100rpx;width:100rpx;margin-top: 20px;" @click="touchStart(index)" v-show="item.isshow"
		 :animation="animationData[index]"
		 >
			13211321
		</view>
		<!-- <view class="div" @touchstart="touchStart">
		
		</view> -->
	</view>
	<view style="background:red;height:100rpx;width:100rpx;margin-top: 20px;" @touchstart="aa" @touchend="bb">
	</view>
</view>

下面是js

<script>
	export default {
		data() {
			return {
				list: [{
						name: '1',
						isshow: true
					},
					{
						name: '2',
						isshow: true
					},
					{
						name: '3',
						isshow: true
					},
					{
						name: '4',
						isshow: true
					}
				],
				animationData: {},

			}
		},
		onShow: function() {



		},
		methods: {
			aa(e){
			console.log(e.touches[0]);	
			},
			bb(e){
				console.log(e.changedTouches[0]);
			},
			touchStart(index) {
				for (var i = 0; i < this.list.length; i++) {
					let a = {}
					a[i] = {}
					this.animationData = { ...this.animationData,
						...a
					}
				}
				var animation = uni.createAnimation({
					duration: 2000,
					timingFunction: 'ease',
				})
				this.animation = animation
				//  // 同时进行
				this.animation.translateX(100).opacity(0).step()
				this.animationData[index] = animation.export()
				 setTimeout(()=>{
					this.list.splice(index,1)
				 },1000)
			},
		
		}
	}
</script>