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