前言
为了更好的用户体验,在开发时我们使用了适当的动画,实现一些切换的效果。在使用@keyframes时遇到一点问题,于是开始找其他的解决方案,发现了transition很适合。
开始
先上一张图片,看看要实现的功能,很简单的。就是要实现右侧小三角的旋转
实践
一开始是使用了@keyframes ,看下小程序的代码
<view class="arrow">
<image class="img-arrow {{isShow?'rotate90':'rotate0'}}"></image>
</view>
使用@ketyframes有什么问题呢?当isShow变为false时(rotate为0),不会出现过渡动画。
来看看使用transitions如何实现我们想要的效果,
.rotate90{
transform: rotate(90deg);
/* transitions: 要过渡的css属性名称 过渡时间 过渡效果 过渡的时延; */
transition: transform 0.2s;
}
.rotate0{
transform: rotate(0deg);
transition: transform 0.2s;
}
展开列表时,使用了height的过渡,但是呢,文字内容还是会显示出来,只有背景能看到过渡的效果,如何解决?
在过渡的元素上加上overflow:hidden;即可。
总结
transition属性:允许CSS属性值在一定的时间区间内平滑的过渡;
animation属性:通过帧动画对当前元素的某些属性进行帧动画的播放,功能相似于transition,但更加的精确、可控。
欢迎留言指导,感谢~或者扫描下方二维码,与我取得联系~ (记得备注:CSND喔~)