uni.createAnimation创建的动画，view的初始位置混乱

uniapp循环生成view 动态添加动画，某些view的位置错乱，下面是源代码

<template>  
    <view style="position: relative;">  
        {{ animationData.length }}  
        <view class="animation" :animation="item" v-for="(item, index) in animationData" :key="index">  
            {{ index * 111 }}  
        </view>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            animationData: [],  
        };  
    },  
    onLoad() {  
        this.tocChangeAnimation()  
    },  
    methods: {  
        tocChangeAnimation() {  
            setTimeout(() => {  
                let animation = uni.createAnimation({  
                    timingFunction: 'linear',  
                    duration: 1000  
                })  
                animation.top(0).step({ duration: 0 })  
                animation.opacity(1).top(100).step()  
                animation.opacity(0).top(200).step()  
                this.animationData.push(animation.export())  
                this.tocChangeAnimation()  
            }, 2000);  
        }  
    }  
};  
</script>  
<style scoped lang="scss">  
page {  
    width: 100vw;  
    height: 100vh;  
    overflow: hidden;  
}  

.animation {  
    width: 100rpx;  
    height: 100rpx;  
    background-color: red;  
    opacity: 0;  
    position: absolute;  
    top: 0;  
    opacity: 0;  
}  
</style>