我們在開發一些Vue項目的時候經常會引入Element這個組件庫，簡潔美觀又好用。有時候我們自己會根據項目的需要自己寫一些公共的組件（造輪子），有很多組件都會用到CSS的過渡、動畫效果使得組件的展示更加美觀、平滑。這時候可以參考Element組件的過渡動畫源碼。
動畫效果演示可以在Element組件庫的內置動畫過渡找到：
fade 淡入淡出
在Vue組件中這種特效的使用是藉助於transition標籤的，詳情可見Vue官方文檔 https://cn.vuejs.org/v2/api/#transition
代碼如下：
<template>
<div>
<el-button @click="show = !show">Click Me</el-button>
<div style="display: flex; margin-top: 20px; height: 100px;">
<transition name="el-fade-in-linear">
<div v-show="show" class="transition-box">.el-fade-in-linear</div>
</transition>
<transition name="el-fade-in">
<div v-show="show" class="transition-box">.el-fade-in</div>
</transition>
</div>
</div>
</template>
<script>
export default {
data: () => ({
show: true
})
}
</script>
<style>
.transition-box {
margin-bottom: 10px;
width: 200px;
height: 100px;
border-radius: 4px;
background-color: #409EFF;
text-align: center;
color: #fff;
padding: 40px 20px;
box-sizing: border-box;
margin-right: 20px;
}
</style>
調用代碼可在Element官方文檔中找到，下面將不再繼續給出，而是給出實現transition效果的具體源碼：
.el-fade-in-linear-enter-active,.el-fade-in-linear-leave-active {
transition: opacity 200ms linear;
}
.el-fade-in-linear-enter,.el-fade-in-linear-leave,.el-fade-in-linear-leave-active {
opacity: 0;
}
.el-fade-in-enter-active,.el-fade-in-leave-active {
transition: all .3s cubic-bezier(.55,0,.1,1);
}
.el-fade-in-enter,.el-fade-in-leave-active {
opacity: 0;
}
el-fade-in-linear 和 el-fade-in 這兩種都是讓指定的元素逐漸消失的過渡效果，而且是通過opacity屬性的逐漸由1變爲0的過程，是屬於比較簡單的一類過渡效果。它們的區別在於el-fade-in-linear是讓指定div在200ms內勻速地將opacity由1變爲0,也就是transition-timing-function屬性爲linear:
而 el-fade-in 的 transition-timing-function 爲 cubic-bezier(.55,0,.1,1)，cubic-bezier在這裏指的是以貝塞爾曲線的速度來過渡變化效果，具體關於貝塞爾曲線的參數含義可以參考這裏：https://www.jianshu.com/p/d999f090d333
而transition除了上述的 transition-timing-function 屬性外，還有以下幾個屬性：
例如 transition: opacity 200ms linear 就是代表在200ms的過渡時間內勻速的改變元素背景顏色的透明度opacity.
zoom縮放
以下演示了三種縮放動畫效果，分別是 .el-zoom-in-center(兩側向中過渡消失/中向兩側顯示)，.el-zoom-in-top（自頂到底過渡顯示/自低到頂過渡消失）, .el-zoom-in-bottom（與zoom-in-top相反）：
這三種過渡特效還是比較實用的，基本可以適用於我們需要製作的公共組件中，比如說element就在下拉列表select組件中用到了zoom-in-top，具體過渡代碼如下：
el-zoom-in-top:
.el-zoom-in-top-enter-active,
.el-zoom-in-top-leave-active {
opacity: 1;
transform: scaleY(1);
transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
transform-origin: center top;
}
.el-zoom-in-top-enter,
.el-zoom-in-top-leave-active {
opacity: 0;
transform: scaleY(0);
}
el-zoom-in-center:
.el-zoom-in-center-enter-active,
.el-zoom-in-center-leave-active {
transition: all .3s cubic-bezier(.55,0,.1,1);
}
.el-zoom-in-center-enter,
.el-zoom-in-center-leave-active {
opacity: 0;
transform: scaleX(0);
}
el-zoom-in-bottom:
.el-zoom-in-bottom-enter-active,
.el-zoom-in-bottom-leave-active {
opacity: 1;
transform: scaleY(1);
transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
transform-origin: center bottom;
}
.el-zoom-in-bottom-enter,
.el-zoom-in-bottom-leave-active {
opacity: 0;
transform: scaleY(0);
}
以上三種特效除了transition變複雜之外，還增加了transform-origin屬性，transform-origin指的是旋轉元素的基點位置，而transform屬性則是另一種CSS3特效屬性：旋轉；scale() 定義的是2D縮放轉換，相應的scaleY()指的是在Y軸上的縮放轉換，關於transform的更多資料可以參考W3CSchool的資料：https://www.w3school.com.cn/cssref/pr_transform.asp
總結：
CSS3新增了一些動畫特效，包括transition(過渡)， transform（旋轉變換），keyframes（動畫），這些都可以幫助我們更加友好地展示頁面，在開發公共組件的時候也需要經常用到這些屬性，其中一些常見的特效我們可以參考已有組件庫的做法，在實際生產中拿來即用，可以起到事半功倍的效果——當然，知其然知其所以然也是很重要的。
參考：
https://www.w3school.com.cn/cssref/pr_transition.asp
