深入理解Vue的過度與動畫
更新時間：2021年11月19日 15:52:34 作者：維生素D沒有用
這篇文章主要為大家介紹了Vue的過度與動畫，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
1.在插入、更新、移除DOM元素時，在合適的時候給元素添加樣式類名
2.元素有一個進入過程：Enter，一個離開過程Leave。
兩個過程都有一個初始態(tài)（）和終止態(tài)（-to）和兩態(tài)之間的過度效果（activate）
3.寫法
動畫：寫好v-enter-active（替換come這個名字）和v-leave-active（替換go）（這兩個是vue的工作）和動畫atguigu（這個是css3的效果）。再用<transition>把動畫元素包起來就行。appear是讓元素一加載就執(zhí)行一次v-enter-activate
過度：這里的起點終點是vue的作用。
或者
<style scoped>
/* .todo-enter-active{
animation: myAnamite 1s;
}
.todo-leave-active{
animation: myAnamite 1s reverse;
}
@keyframes myAnamite {
from{
transform: translateX(-100%);
}
to{
transform: translateX(0);
}
} */
.todo-enter,.todo-leave-to{
transform: translateX(-100%);
}
.todo-leave,.todo-enter-to{
transform: translateX(0);
}
.todo-enter-active,.todo-leave-active{
transition: 1s linear;
}
</style>
多個元素過度：
第三方動畫庫：anamite.css庫
安裝：
引入：在script中 import ‘animate.css'
總結
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內容!
相關文章
本篇文章給大家通過代碼實例分析了vue.js數據傳遞以及數據分發(fā)slot的相關知識，有這方面興趣的朋友參考下吧。2018-01-01
本文主要介紹了vue3?解決數據更新而視圖未更新問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-10-10
這篇文章主要介紹了詳解如何用VUE寫一個多用模態(tài)框組件模版，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
在vue3中新的組合式API中沒有this,那我們如果需要用到this怎么辦?下面這篇文章主要給大家介紹了關于Vue3中使用this的詳細教程,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue如何自定義地址設置@，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要給大家介紹了關于如何在Vue中使用Echarts實例圖的相關資料，文中介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-10-10
這篇文章主要介紹了詳解Vue 單文件組件的三種寫法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
這篇文章主要為大家詳細介紹了Vue3中使用富文本編輯器的相關知識,文中的示例代碼講解詳細,具有一定的學習價值,感興趣的小伙伴可以參考一下2023-10-10
本篇文章主要介紹了vue keep-alive請求數據的方法示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
防抖函數的作用是高頻率觸發(fā)的事件,在指定的單位時間內,只響應最后一次,如果在指定的時間內再次觸發(fā),則重新計算時間,本文將給大家詳細的介紹一下Vue3使用customRef封裝防抖函數的方法,需要的朋友可以參考下2023-09-09