uniapp实现简单的动画效果（不使用dom操作）

本文介绍: uniapp做开发区别于H5开发，不能使用 js进行dom 操作，只能获取 dom 信息。（获取 dom 信息参考：https://www.cn blog s.com/h ui h ui h e ro/p/12966528.html ）不能操作 dom，这使得通过操作 dom来实现一些简单的动画效果变得困难不过有一个很简单的思路：定义不同的class，每个 class 对应一种样式，加一个 transition 过渡。然后通过更换节点的class 即可实现两种样式过渡（动画）

uniapp做开发区别于H5开发，不能使用js进行dom 操作，只能获取 dom信息。（获取 dom信息参考：https://www.cn blog s.com/h ui h ui h e ro/p/12966528.html ）不能操作 d o m，这使得通过操作d om来实现一些简单的动画效果变得困难不过有一个很简单的思路：定义不同的class，每个 class 对应一种样式，加一个 transition 过渡。然后通过更换节点的class 即可实现两种样式过渡（动画）

示例（展示思路用）

&lt;view :class="isLarge?'yesLarge':'notLarge'" @tap="toggleSize"&gt;&lt;/view>


toggleSize(){
    this.isLarge=!this.isLarge
}


.yesLarge{
    width: 200rpx;
    height: 200rpx;
    background-color: #a1a1a1;
    transition: all .5s;
}
.notLarge{
    width: 40rpx;
    height: 40rpx;
    background-color: #0169b1;
    transition: all .5s;
}