前言

為了更好的使用者體驗，在開發時我們使用了適當的動畫，實現一些切換的效果。在使用@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喔~）