Vue.js動畫

時間 2019-11-26

原文原文鏈接

組件的過渡

條件的渲染（使用v-if）
條件的展現（使用v-show）
動態組件
組件根節點

連接地址下載：css

<script src="http://raw.githubusercontent.com/daneden/animate.css/master/animate.css"></script>

css過渡

下面是一個運用css點擊顯示隱藏顯示的2s動畫效果：vue

<style>
        /* 離開進行中和開始進行中，設置了一個透明度的變化*/
        .fade-enter-active,.fade-leave-active{
          transition: opacity 2s;
        }
        /* 開始和結束前的時候，透明度爲0，至關於把它給隱藏掉*/
        .fade-enter,.fade-leave-to{
          opacity: 0;
        }
    </style>
    
    <body>
      <div id="main">
        <button v-on:click="ok = !ok">點擊</button>
        <transition name="fade">
          <p v-if="ok">俠課島-vue動畫課程</p>
        </transition>
      </div>
    </body>
    
    <script>
      var vm = new Vue({
        el: '#main',
        data: {
          ok: true
        }
      });
    </script>

過渡理解git

當使用/刪除包含在transition組件中的元素時，Vue將會作的處理：github

首先會先嗅探一下這個目標元素是否使用CSS過渡或動畫，在使用的時候添加或者刪除CSS類名。
若是沒有檢測到這個CSS過渡或動畫，DOM操做（插入或刪除）會直接執行下一幀，而不會在這一幀繼續執行。

過渡動畫CSS的類名

v-enter，定義進入過渡的開始狀態
v-enter-active，定義過渡的狀態，在元素的整個過渡過程當中做用，在元素被插入時生效，在transition/animation完成以後移除。這個類能夠被用來定義過渡的過程時間，延遲和曲線函數。
v-enter-to，定義進入過渡的結束狀態，在元素被插入一幀後生效（與此同時v-enter被刪除），在transition/animation完成以後移除。
v-leave，定義離開過渡的開始狀態，在離開過渡被觸發時生效，在下一個幀移除。
v-leave-active，定義過渡的狀態，在元素整個過渡過程當中做用，在離開過渡被觸發後當即生效，在transition/animation完成以後移除，這個類能夠被用來定義過渡的過程時間，延遲和曲線函數。
v-leave-to，定義離開過渡前的結束狀態，在離開過渡被觸發一幀後生效（與此同時v-leave被刪除），在transition/animation完成以後移除。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。