vue學(xué)習(xí)筆記之Vue中css動畫原理簡單示例
更新時間：2020年02月29日 18:41:09 作者：Rachel~Liu
這篇文章主要介紹了vue學(xué)習(xí)筆記之Vue中css動畫原理,結(jié)合簡單實(shí)例形式分析了Vue中css樣式變換動畫效果實(shí)現(xiàn)原理與相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了Vue中css動畫原理。分享給大家供大家參考，具體如下：
當(dāng)transition包裹了一個元素之后，vue會自動分析元素的css樣式，構(gòu)建動畫流程。
so，我們需要定義style。
vue中的css動畫，其實(shí)就是某一個時間點(diǎn)，給元素再增加了一個css樣式體現(xiàn)的。
v-if、v-show、動態(tài)組件 都可以實(shí)現(xiàn)過渡效果。
如果沒有給transition定義name，vue中默認(rèn)是.v-enter、.v-leave-to。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中css動畫原理</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.fade-enter, .fade-leave-to {
opacity: 0;
}
.fade-enter-active, .fade-leave-active {
transition: opacity 1s;
}
</style>
</head>
<body>
<div id="app">
<transition name="fade">
<div v-if="show">hello world!</div>
</transition>
<button @click="handleBtnClick">change</button>
</div>
</body>
</html>
<script>
var vm = new Vue({
el: '#app',
data: {
show: true
},
methods: {
handleBtnClick: function () {
this.show = !this.show
}
}
})
</script>
運(yùn)行結(jié)果：
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。
希望本文所述對大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
vue+Element-ui的el-table的多級內(nèi)容渲染問題
這篇文章主要介紹了vue+Element-ui的el-table的多級內(nèi)容渲染問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue2中引用better-scroll和使用 better-scroll的方法，使用時有三個要點(diǎn)及注意事項(xiàng)在文中給大家詳細(xì)介紹 ,需要的朋友可以參考下2018-11-11
下面小編就為大家?guī)硪黄鉀QVue編譯時寫在style中的路徑問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了vue工程如何為組件自動注入全局樣式文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue中利用better-scroll組件實(shí)現(xiàn)橫向滾動功能
橫向滾動這個功能是我們?nèi)粘ｉ_發(fā)中經(jīng)常會遇到的一個需求,下面這篇文章主要給大家介紹了關(guān)于Vue中如何利用better-scroll組件實(shí)現(xiàn)橫向滾動的相關(guān)資料,需要的朋友可以參考下2021-06-06
這篇文章主要介紹了vue+element控件之間間距太大問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
Vue引入高德地圖并觸發(fā)實(shí)現(xiàn)多個標(biāo)點(diǎn)的示例詳解
這篇文章主要介紹了Vue引入高德地圖并觸發(fā)實(shí)現(xiàn)多個標(biāo)點(diǎn),主要是在public下的index.html中引入地圖，引入組件設(shè)置寬高100%，本文通過示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-05-05
如何使用uniapp內(nèi)置組件webview消息傳遞詳解
uni-app的web-view組件用于在應(yīng)用中打開網(wǎng)頁,并支持應(yīng)用和網(wǎng)頁之間的消息傳遞,這篇文章主要介紹了如何使用uniapp內(nèi)置組件webview消息傳遞的相關(guān)資料,需要的朋友可以參考下2025-02-02
vue-baidu-map實(shí)現(xiàn)區(qū)域圈線和路徑的漸變色
這篇文章主要介紹了vue-baidu-map實(shí)現(xiàn)區(qū)域圈線和路徑的漸變色方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
Vant是一個專為移動端設(shè)計(jì)的輕量級組件庫,自2017年開源以來,提供了Vue2、Vue3及多平臺版本支持,安裝Vant時需要注意版本兼容問題,Vue3項(xiàng)目應(yīng)安裝最新版Vant3,而Vue2項(xiàng)目則需安裝Vant2,安裝錯誤時,需卸載后重新安裝正確版本2024-10-10