uniapp实现简单的动画效果(不使用dom操作)
uniapp做开发区别于H5开发,不能使用js进行dom操作,只能获取dom信息。(获取dom信息参考:https://www.cnblogs.com/huihuihero/p/12966528.html ) 不能操作dom,这使得通过操作dom来实现一些简单的动画效果变得困难 不过有一个很简单的思路: 定义不同的class,每个class对应一种样式,加一个transition过渡。然后通过更换
·
uniapp做开发区别于H5开发,不能使用js进行dom操作,只能获取dom信息。 (获取dom信息参考:https://www.cnblogs.com/huihuihero/p/12966528.html ) 不能操作dom,这使得通过操作dom来实现一些简单的动画效果变得困难 不过有一个很简单的思路: 定义不同的class,每个class对应一种样式,加一个transition过渡。然后通过更换节点的class即可实现两种样式过渡(动画)
示例(展示思路用)
<view :class="isLarge?'yesLarge':'notLarge'" @tap="toggleSize"></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;
}
更多推荐
已为社区贡献3条内容
所有评论(0)