Vue學習筆記進階篇——單元素過分

時間  2019-11-17
標籤 vue 學習 筆記 進階 元素 過分 简体版
原文   原文鏈接

本文爲轉載，原文：Vue學習筆記進階篇——單元素過分javascript

概述

Vue 在插入、更新或者移除 DOM 時，提供多種不一樣方式的應用過渡效果。
包括如下工具：css

在 CSS 過渡和動畫中自動應用 class
能夠配合使用第三方 CSS 動畫庫，如 Animate.css
在過渡鉤子函數中使用 JavaScript 直接操做 DOM
能夠配合使用第三方 JavaScript 動畫庫，如 Velocity.jsjava

單元素/組件的過分

Vue 提供了 transition 的封裝組件，在下列情形中，能夠給任何元素和組件添加 entering/leaving 過渡git

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

這裏是一個典型的例子：ajax

<div id="app1">
    <button @click="show = !show">toggle</button>
    <transition name="fade">
        <p v-if="show">hello</p>
    </transition>
</div>
new Vue({
    el:'#app1',
    data:{
        show:true
    }
})
.fade-enter-active, .fade-leave-active{
    transition: opacity 2s;
}
.fade-enter, .fade-leave-to{
    opacity: 0;
}

運行結果以下：瀏覽器


點擊toggle按鈕會看見文字淡入淡出的效果。
當插入或刪除包含在 transition 組件中的元素時，Vue 將會作如下處理：app

  1. 自動嗅探目標元素是否應用了 CSS 過渡或動畫，若是是，在恰當的時機添加/刪除 CSS 類名。
  2. 若是過渡組件提供了 JavaScript 鉤子函數，這些鉤子函數將在恰當的時機被調用。
  3. 若是沒有找到 JavaScript 鉤子而且也沒有檢測到 CSS 過渡/動畫，DOM 操做（插入/刪除）在下一幀中當即執行。(注意：此指瀏覽器逐幀動畫機制，和Vue的 nextTick 概念不一樣)

過分的CSS類名

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

對於這些在 enter/leave 過渡中切換的類名，v- 是這些類名的前綴。使用 <transition name="my-transition" 能夠重置前綴，好比 v-enter 替換爲 my-transition-enter。ide

CSS過分

經常使用的過渡都是使用 CSS 過渡。如下爲示例代碼。函數

<div id="app2">
    <button @click="show = !show">toggle css</button>
    <transition name="slide-fade">
        <p v-if="show">CSS 過渡</p>
    </transition>
</div>
new Vue({
    el:'#app2',
    data:{
        show:true
    }
})
        .slide-fade-enter-active{
            transition: all .3s ease;
        }
        .slide-fade-leave-active{
            transition: all .8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        }
        .slide-fade-enter, .slide-fade-leave-to{
            transform: translateX(100px);
            opacity: 0;
        }

運行結果


點擊按鈕就會看到動畫效果。

CSS動畫

CSS 動畫用法同 CSS 過渡，區別是在動畫中 v-enter 類名在節點插入 DOM 後不會當即刪除，而是在 animationend 事件觸發時刪除。
示例： (省略了兼容性前綴)

<div id="app3">
    <button @click="show = !show">toggle css</button>
    <transition name="bounce">
        <p v-if="show">css 動畫</p>
    </transition>
</div>
new Vue({
    el:'#app3',
    data:{
        show:true
    }
})
        .bounce-enter-active{
            animation: bounce-in .5s;
        }
        .bounce-leave-active{
            animation: bounce-in .5s reverse;
        }
        @keyframes bounce-in {
            0%{
                transform: scale(0);
            }
            50%{
                transform: scale(1.5);
            }
            100%{
                transform: scale(1);
            }
        }

運行結果：

自定義過渡類名

咱們能夠經過如下特性來自定義過渡類名：

  • enter-class
  • enter-active-class
  • enter-to-class (>= 2.1.8 only)
  • leave-class
  • leave-active-class
  • leave-to-class (>= 2.1.8 only)

他們的優先級高於普通的類名，這對於 Vue 的過渡系統和其餘第三方 CSS 動畫庫，如 Animate.css 結合使用十分有用。
示例：

<link href="https://unpkg.com/animate.css@3.5.1/animate.min.css" rel="stylesheet" type="text/css">
<div id="app4">
    <button @click="show = !show">toggle coustom class</button>
    <transition name="bounce"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight">
        <p v-if="show">自定義過渡類名</p>
    </transition>
</div>
new Vue({
    el:'#app4',
    data:{
        show:true
    }
})

運行結果：


animate.css的學習能夠參考官網：https://daneden.github.io/animate.css/

javascript鉤子

能夠在屬性中聲明 JavaScript 鉤子

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"
  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled">
  <!-- ... -->
</transition>
methods: {
  // --------
  // 進入中
  // --------
  beforeEnter: function (el) {
    // ...
  },
  // 此回調函數是可選項的設置
  // 與 CSS 結合時使用
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },
  // --------
  // 離開時
  // --------
  beforeLeave: function (el) {
    // ...
  },
  // 此回調函數是可選項的設置
  // 與 CSS 結合時使用
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用於 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

這些鉤子函數能夠結合 CSS transitions/animations 使用，也能夠單獨使用。

當只用 JavaScript 過渡的時候， 在 enter和leave 中，回調函數 done 是必須的 。 不然，它們會被同步調用，過渡會當即完成。

推薦對於僅使用 JavaScript 過渡的元素添加 v-bind:css="false"，Vue 會跳過 CSS 的檢測。這也能夠避免過渡過程當中 CSS 的影響。

一個使用 Velocity.js 的簡單例子：

<div id="app5">
    <button @click="show = !show">toggle hook</button>
    <transition @before-enter="beforeEnter"
    @enter="enter"
    @leave="leave"
    :css="false">
        <p v-if="show">javascript 鉤子使用</p>
    </transition>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script >
new Vue({
    el:'#app5',
    data:{
        show:false
    },
    methods:{
        beforeEnter:function (el) {
            el.style.opacity = 0
            el.style.transformOrigin = 'left'
        },
        enter:function (el, done) {
            Velocity(el, {opacity:1, fontSize:'1.4em'}, {duration:300})
            Velocity(el, {fontSize:'1em'}, {complete:done})
        },
        leave:function (el, done) {
            Velocity(el, {translateX:'15px', rotateZ:'50deg'}, {duration:600})
            Velocity(el, {rotateZ:'100deg'}, {loop:2})
            Velocity(el,{
                rotateZ:'45deg',
                translateY:'30px',
                translateX:'30px',
                opacity:0
            }, {complete:done})
        }
    }
})
</script>

運行結果：

初始渲染的過分

能夠經過appear 特性設置節點的在初始渲染的過渡
這裏默認和進入和離開過渡同樣，一樣也能夠自定義 CSS 類名。

<transition
  appear
  appear-class="custom-appear-class"
  appear-to-class="custom-appear-to-class"
  appear-active-class="custom-appear-active-class">
  <!-- ... -->
</transition>

自定義 JavaScript 鉤子：

<transition
  appear
  v-on:before-appear="customBeforeAppearHook"
  v-on:appear="customAppearHook"
  v-on:after-appear="customAfterAppearHook"
  v-on:appear-cancelled="customAppearCancelledHook"
>
  <!-- ... -->
</transition>

示例代碼：

<!--初始渲染-->
<div id="app6">
    <transition appear
                appear-active-class="animated tada">
        <p>初始畫面</p>
    </transition>
</div>
new Vue({
    el:'#app6',
    data:{
        show:true
    }
})

運行結果：


在界面加載該元素時，會有個過渡效果。

完

本文爲原創，轉載請註明出處
上一節：Vue學習筆記入門篇——組件雜項
返回目錄
下一節：Vue學習筆記進階篇——多元素及多組件過渡

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程