Vue.js動畫
阿新 • • 發佈：2020-12-06
元件的過渡
- 條件的渲染（使用v-if）
- 條件的展示（使用v-show）
- 動態元件
- 元件根節點
連結地址下載：
<script src="http://raw.githubusercontent.com/daneden/animate.css/master/animate.css"></script>css過渡
下面是一個運用css點選顯示隱藏顯示的2s動畫效果：
<style>
/* 離開進行中和開始進行中，設定了一個透明度的變化*/
.fade-enter-active,.fade-leave-active{
transition: opacity 2s;
}
/* 開始和結束前的時候，透明度為0，相當於把它給隱藏掉*/
.fade-enter,.fade-leave-to{
opacity: 0;
}
</style>
<body>
<div
過渡理解
當使用/刪除包含在transition元件中的元素時，Vue將會做的處理：
- 首先會先嗅探一下這個目標元素是否使用CSS過渡或動畫，在使用的時候新增或者刪除CSS類名。
- 如果沒有檢測到這個CSS過渡或動畫，DOM操作（插入或刪除）會直接執行下一幀，而不會在這一幀繼續執行。
資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com
過渡動畫CSS的類名
- v-enter，定義進入過渡的開始狀態
- v-enter-active，定義過渡的狀態，在元素的整個過渡過程中作用，在元素被插入時生效，在transition/animation完成之後移除。這個類可以被用來定義過渡的過程時間，延遲和曲線函式。
- v-enter-to，定義進入過渡的結束狀態，在元素被插入一幀後生效（與此同時v-enter被刪除），在transition/animation完成之後移除。
- v-leave，定義離開過渡的開始狀態，在離開過渡被觸發時生效，在下一個幀移除。
- v-leave-active，定義過渡的狀態，在元素整個過渡過程中作用，在離開過渡被觸發後立即生效，在transition/animation完成之後移除，這個類可以被用來定義過渡的過程時間，延遲和曲線函式。
- v-leave-to，定義離開過渡前的結束狀態，在離開過渡被觸發一幀後生效（與此同時v-leave被刪除），在transition/animation完成之後移除。