快捷導(dǎo)航

vue學(xué)習(xí)筆記之Vue中css動(dòng)畫原理簡單示例

更新時(shí)間：2020年02月29日 18:41:09 作者：Rachel~Liu

這篇文章主要介紹了vue學(xué)習(xí)筆記之Vue中css動(dòng)畫原理,結(jié)合簡單實(shí)例形式分析了Vue中css樣式變換動(dòng)畫效果實(shí)現(xiàn)原理與相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了Vue中css動(dòng)畫原理。分享給大家供大家參考，具體如下：

當(dāng)transition包裹了一個(gè)元素之后，vue會自動(dòng)分析元素的css樣式，構(gòu)建動(dòng)畫流程。

so，我們需要定義style。

vue中的css動(dòng)畫，其實(shí)就是某一個(gè)時(shí)間點(diǎn)，給元素再增加了一個(gè)css樣式體現(xiàn)的。

v-if、v-show、動(dòng)態(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動(dòng)畫原理</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 package.json配置深入分析
這篇文章主要介紹了Vue package.json配置，package.json是每個(gè)前端項(xiàng)目都會有的json文件，位于項(xiàng)目的根目錄中。很多腳手架在創(chuàng)建項(xiàng)目的時(shí)候會幫我們自動(dòng)初始化好 package.json
2023-01-01
Vue實(shí)現(xiàn)簡單彈窗效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡單彈窗效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-09-09
使用Vue-cli3.0創(chuàng)建的項(xiàng)目如何發(fā)布npm包
這篇文章主要介紹了使用Vue-cli3.0創(chuàng)建的項(xiàng)目，如何發(fā)布npm包,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-10-10
Vue中Quill富文本編輯器的使用教程
這篇文章主要介紹了Vue中Quill富文本編輯器的使用教程，包括自定義工具欄、自定義字體選項(xiàng)、圖片拖拽上傳、圖片改變大小等使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-09-09
vue3 element plus中el-radio選中之后再次點(diǎn)擊取消選中問題
這篇文章主要介紹了vue3 element plus中el-radio選中之后再次點(diǎn)擊取消選中問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
vue項(xiàng)目下npm或yarn下安裝echarts多個(gè)版本方式
這篇文章主要介紹了vue項(xiàng)目下npm或yarn下安裝echarts多個(gè)版本方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-06-06
Vue中watch監(jiān)聽首次不生效的解決辦法
在 Vue 中,watch 屬性用于觀察和響應(yīng) Vue 實(shí)例上數(shù)據(jù)的變動(dòng),然而,默認(rèn)情況下,watch 確實(shí)不會觸發(fā)組件創(chuàng)建時(shí)的變動(dòng),這里有幾種方式可以處理或繞過這個(gè)問題,需要的朋友可以參考下
2024-09-09
vue實(shí)現(xiàn)右鍵彈出菜單
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)右鍵彈出菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
vue?v-for中key的原理詳析
key屬性可以用來提升v-for渲染的效率,vue中使用v-for渲染數(shù)據(jù)的時(shí)候,并不會去改變原有的元素和數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于vue?v-for中key原理的相關(guān)資料,需要的朋友可以參考下
2022-04-04
詳解Vue.js中.native修飾符
這篇文章主要介紹了Vue.js中.native修飾符,給普通的HTML標(biāo)簽監(jiān)聽一個(gè)事件，之后添加 .native 修飾符是不會起作用的。需要的朋友可以參考下
2018-04-04