nvue页面动画效果(缩放)

问题: 在vue页面运行成功的缩放动画在nvue页面无法运行

需要添加动画的元素添加动态样式

<image :class="{tradefault: !change, default: change}" :src="item.image" mode="aspectFit"/>

定义属性change 通过改变change的值来切换对应样式

data(){
    return {
        change: false
    }
}

为了动画持续执行, 使用setInterval进行定时操作

onshow() {
    setInterval(() => {
        this.go = !this.go
    },1000)
}

元素变化前后样式

.default { 
    width: 85rpx;
    height: 85rpx; 
    border-radius: 50%; 
    overflow: hidden; 
    opacity: .7;
    transform: scale(1);
    transition:transform 1s ;
}
.tradefault { 
    width: 85rpx; 
    height: 85rpx; 
    border-radius: 50%; 
    overflow: hidden; 
    opacity: .7;
    transform:  scale(1.2);
    transition-property:transform;
    transition-duration: 1s;
}