深入理解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 ‘a(chǎn)nimate.css'
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
Vue組件化(ref,props,?mixin,.插件)詳解
這篇文章主要介紹了Vue組件化(ref,?props,?mixin,?插件)的相關(guān)知識,包括ref屬性，props配置項及mixin混入的方式，本文通過示例代碼多種方式相結(jié)合給大家介紹的非常詳細，需要的朋友可以參考下2022-05-05
vue2實現(xiàn)可復用的輪播圖carousel組件詳解
這篇文章主要為大家詳細介紹了vue2實現(xiàn)可復用的輪播圖carousel組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了vue組件文檔生成備注詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue3+vite兼容低版本的白屏問題詳解(安卓7/ios11)
這篇文章主要給大家介紹了關(guān)于vue3+vite兼容低版本的白屏問題的相關(guān)資料,還給大家介紹了vue打包項目以后白屏和圖片加載不出來問題的解決方法,需要的朋友可以參考下2022-12-12
這篇文章主要給大家介紹了關(guān)于如何在vue中使用unocss以及基本使用方法的相關(guān)資料,unocss是一個即時的原子CSS引擎,它可以讓你用簡短的類名來控制元素的樣式,而不需要寫復雜的CSS代碼,需要的朋友可以參考下2023-07-07
在微信小程序中，可以使用全局配置和使用開發(fā)、體驗、生產(chǎn)環(huán)境的地址，這篇文章主要介紹了Vue微信和uniapp配置環(huán)境地址,需要的朋友可以參考下2023-07-07
解決vite.config.js無法使用__dirname的問題
這篇文章主要介紹了解決vite.config.js無法使用__dirname的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue -- webpack 項目自動打包壓縮成zip文件的方法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
ECharts是一個強大的畫圖插件，在vue項目中，我們常?？梢砸肊charts來完成完成一些圖表的繪制，本文就來和大家介紹一下如何在Vue項目中引入ECharts吧2023-03-03
這篇文章主要介紹了vue3的沙箱機制的相關(guān)資料，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-04-04