nvue 中 transition 过度动画 安卓真机中、模拟器都特卡 ， ios 过度比较流畅

以下是案例代码 不知道是写的问题还是说安卓就会卡

<template>  
    <view>  
        <button class="but" @click="listMode = !listMode">按钮</button>  

        <view class="list" :style="{ width: `${width}rpx` ,  height: `${cols_1_height * lists.length + cols_1_margin_bottom * lists.length}rpx`  }"   offset-accuracy="100" show-scrollbar="false">  
            <view class="cell" v-for="(num, index) in lists" :key="index" :style="initProdStyle(index)">  
                <view class="panel">  
                    <text class="text">{{ num }}</text>  
                </view>   
            </view>  
        </view>    
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            lists: ['A', 'B', 'C', 'D', 'E' ,'E' ,'E' ,'E' ,'E' ,'E' ,'E' ,'E' , ],  

            listMode: true, //          模式 默认一行一个项目  
            width: 750, //              列表宽  

            cols_1_margin_left: 0, //   一个项目的左边距  
            cols_1_margin_bottom: 15, //一个项目的底边距  
            cols_1_height: 300, //      一个项目的高  

            cols_2_margin_left: 20, //  两个项目的左边距  
            cols_2_margin_centre: 15, //两个项目的中边距  
            cols_2_margin_bottom: 20, //两个项目的左边距  
            cols_2_height: 460 //       两个项目的高  
        };  
    },  
    methods: {  

        /**  
         * 每个项目的样式计算初始化  
         * @param {Object} idx  
         */  
        initProdStyle(idx) {  
            if (this.listMode) {  
                //一行一个  
                return {  
                    width: `${this.width - this.cols_1_margin_left * 2}rpx`,  
                    height: `${this.cols_1_height}rpx`,  
                    top: `${this.cols_1_height * idx + (this.cols_1_margin_bottom + 0) * idx}rpx`,  
                    left: `${this.cols_1_margin_left}rpx`  
                };  
            } else {  
                //一行两个  
                let itemWidth = (this.width - this.cols_2_margin_left * 2 - this.cols_2_margin_centre) / 2; //计算宽  
                return {  
                    width: `${itemWidth}rpx`,  
                    height: `${this.cols_2_height}rpx`,  
                    top: `${this.cols_2_height * parseInt(idx / 2) + this.cols_2_margin_bottom * parseInt(idx / 2)}rpx`,  
                    // 判断是第一列还是第二列  
                    left: `${idx % 2 == 0 ? this.cols_2_margin_left : itemWidth + this.cols_2_margin_left + this.cols_2_margin_centre}rpx`  
                };  
            }  
        },  

    }  
};   
</script>  

<style scoped>  
.but {  
    margin-top: 20rpx;  
    height: 100rpx;  
    width: 100rpx;  
}  
.list {  
    position: relative;  
    flex-wrap: wrap;  
    flex-direction: rowrow;  
}  
.cell {  
    position: absolute;   

    transition-property: opacity, transform, width, height, background-color, right, left, bottom, top;  
    transition-duration:3000ms;  
    transition-timing-function: ease;  
    transition-delay: 0s;  

    background-color: #c1bff7;  
    overflow: hidden;  
    /* box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.2); */  

    border-top-left-radius: 5rpx;  
    border-top-right-radius: 5rpx;  
    border-bottom-left-radius: 5rpx;  
    border-bottom-right-radius: 5rpx;  
}  

.panel {  
    margin-top: 35rpx;  
    margin-bottom: 35rpx;  
    flex-direction: column;  
    justify-content: center;  
    border-width: 2rpx;  
    border-style: solid;  
    border-color: rgb(162, 217, 192);  
    background-color: rgba(162, 217, 192, 0.2);  
}  
.text {  
    font-size: 88rpx;  
    text-align: center;  
    color: #41b883;  
}  
</style>