vue學(xué)習(xí)筆記之Vue中css動畫原理簡單示例
更新時間：2020年02月29日 18:41:09 作者：Rachel~Liu
這篇文章主要介紹了vue學(xué)習(xí)筆記之Vue中css動畫原理,結(jié)合簡單實例形式分析了Vue中css樣式變換動畫效果實現(xiàn)原理與相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了Vue中css動畫原理。分享給大家供大家參考，具體如下：
當(dāng)transition包裹了一個元素之后，vue會自動分析元素的css樣式，構(gòu)建動畫流程。
so，我們需要定義style。
vue中的css動畫，其實就是某一個時間點，給元素再增加了一個css樣式體現(xiàn)的。
v-if、v-show、動態(tài)組件 都可以實現(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>
運行結(jié)果：
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
希望本文所述對大家vue.js程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了Vue package.json配置，package.json是每個前端項目都會有的json文件，位于項目的根目錄中。很多腳手架在創(chuàng)建項目的時候會幫我們自動初始化好 package.json2023-01-01
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)簡單彈窗效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
使用Vue-cli3.0創(chuàng)建的項目 如何發(fā)布npm包
這篇文章主要介紹了使用Vue-cli3.0創(chuàng)建的項目，如何發(fā)布npm包,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-10-10
這篇文章主要介紹了Vue中Quill富文本編輯器的使用教程，包括自定義工具欄、自定義字體選項、圖片拖拽上傳、圖片改變大小等使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-09-09
vue3 element plus中el-radio選中之后再次點擊取消選中問題
這篇文章主要介紹了vue3 element plus中el-radio選中之后再次點擊取消選中問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
vue項目下npm或yarn下安裝echarts多個版本方式
這篇文章主要介紹了vue項目下npm或yarn下安裝echarts多個版本方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
在 Vue 中,watch 屬性用于觀察和響應(yīng) Vue 實例上數(shù)據(jù)的變動,然而,默認(rèn)情況下,watch 確實不會觸發(fā)組件創(chuàng)建時的變動,這里有幾種方式可以處理或繞過這個問題,需要的朋友可以參考下2024-09-09
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)右鍵彈出菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
key屬性可以用來提升v-for渲染的效率,vue中使用v-for渲染數(shù)據(jù)的時候,并不會去改變原有的元素和數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于vue?v-for中key原理的相關(guān)資料,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了Vue.js中.native修飾符,給普通的HTML標(biāo)簽監(jiān)聽一個事件，之后添加 .native 修飾符是不會起作用的。需要的朋友可以參考下2018-04-04