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+Element-ui的el-table的多級內(nèi)容渲染問題
這篇文章主要介紹了vue+Element-ui的el-table的多級內(nèi)容渲染問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue2中引用及使用 better-scroll的方法詳解
這篇文章主要介紹了vue2中引用better-scroll和使用 better-scroll的方法，使用時有三個要點及注意事項在文中給大家詳細(xì)介紹 ,需要的朋友可以參考下
2018-11-11
解決Vue編譯時寫在style中的路徑問題
下面小編就為大家?guī)硪黄鉀QVue編譯時寫在style中的路徑問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
vue工程如何為組件自動注入全局樣式文件
這篇文章主要介紹了vue工程如何為組件自動注入全局樣式文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue中利用better-scroll組件實現(xiàn)橫向滾動功能
橫向滾動這個功能是我們?nèi)粘ｉ_發(fā)中經(jīng)常會遇到的一個需求,下面這篇文章主要給大家介紹了關(guān)于Vue中如何利用better-scroll組件實現(xiàn)橫向滾動的相關(guān)資料,需要的朋友可以參考下
2021-06-06
vue+element控件之間間距太大問題及解決
這篇文章主要介紹了vue+element控件之間間距太大問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06
Vue引入高德地圖并觸發(fā)實現(xiàn)多個標(biāo)點的示例詳解
這篇文章主要介紹了Vue引入高德地圖并觸發(fā)實現(xiàn)多個標(biāo)點,主要是在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實現(xiàn)區(qū)域圈線和路徑的漸變色
這篇文章主要介紹了vue-baidu-map實現(xiàn)區(qū)域圈線和路徑的漸變色方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-07-07
Vue項目如何安裝引入使用Vant
Vant是一個專為移動端設(shè)計的輕量級組件庫,自2017年開源以來,提供了Vue2、Vue3及多平臺版本支持,安裝Vant時需要注意版本兼容問題,Vue3項目應(yīng)安裝最新版Vant3,而Vue2項目則需安裝Vant2,安裝錯誤時,需卸載后重新安裝正確版本
2024-10-10