CSS: transition和@keyframes动画

前言

为了更好的用户体验，在开发时我们使用了适当的动画，实现一些切换的效果。在使用@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，但更加的精确、可控。

 

嘘寒问暖 不如打笔巨款~