Vue學習筆記進階篇之單元素過度

更新時間：2017年07月19日 11:02:34 作者：Chain

這篇文章主要介紹了Vue學習筆記進階篇之單元素過度，具有一定的參考價值，感興趣的小伙伴們可以參考一下

概述

Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應用過渡效果。

包括以下工具：

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

單元素/組件的過度

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

條件渲染（使用 v-if）
條件展示（使用 v-show）
動態(tài)組件
組件根節(jié)點

這里是一個典型的例子：

<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 將會做以下處理：

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

過度的CSS類名

v-enter: 定義進入過渡的開始狀態(tài)。在元素被插入時生效，在下一個幀移除。
v-enter-active: 定義過渡的狀態(tài)。在元素整個過渡過程中作用，在元素被插入時生效，在 transition/animation 完成之后移除。這個類可以被用來定義過渡的過程時間，延遲和曲線函數。
v-enter-to: 2.1.8版及以上定義進入過渡的結束狀態(tài)。在元素被插入一幀后生效（于此同時 v-enter 被刪除），在 transition/animation 完成之后移除。
v-leave: 定義離開過渡的開始狀態(tài)。在離開過渡被觸發(fā)時生效，在下一個幀移除。
v-leave-active: 定義過渡的狀態(tài)。在元素整個過渡過程中作用，在離開過渡被觸發(fā)后立即生效，在 transition/animation 完成之后移除。這個類可以被用來定義過渡的過程時間，延遲和曲線函數。
v-leave-to: 2.1.8版及以上定義離開過渡的結束狀態(tài)。在離開過渡被觸發(fā)一幀后生效（于此同時 v-leave 被刪除），在 transition/animation 完成之后移除。

對于這些在 enter/leave 過渡中切換的類名，v- 是這些類名的前綴。使用 <transition name="my-transition" 可以重置前綴，比如 v-enter 替換為 my-transition-enter。

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 過渡，區(qū)別是在動畫中 v-enter 類名在節(jié)點插入 DOM 后不會立即刪除，而是在 animationend 事件觸發(fā)時刪除。

示例： (省略了兼容性前綴)

<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)

他們的優(yōu)先級高于普通的類名，這對于 Vue 的過渡系統(tǒng)和其他第三方 CSS 動畫庫，如 Animate.css 結合使用十分有用。
示例：

<link  rel="external nofollow" 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 特性設置節(jié)點的在初始渲染的過渡

這里默認和進入和離開過渡一樣，同樣也可以自定義 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
  }
})

運行結果：

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue3+ts重復參數提取成方法多處調用以及字段無值時不傳字段給后端問題
在進行API開發(fā)時,優(yōu)化參數傳遞是一個重要的考量,傳統(tǒng)方法中,即使參數值為空,也會被包含在請求中發(fā)送給后端,這可能會導致不必要的數據處理,而優(yōu)化后的方法則只會傳遞那些實際有值的字段,從而提高數據傳輸的有效性和后端處理的效率
2024-10-10
Vue實現簡易購物車案例
這篇文章主要為大家詳細介紹了Vue實現簡易購物車案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-06-06
解決vue項目報錯webpackJsonp is not defined問題
下面小編就為大家分享一篇解決vue項目報錯webpackJsonp is not defined問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
Vue.js實現實例搜索應用功能詳細代碼
本文給大家分享Vue.js實現實例搜索應用功能詳細代碼，非常不錯，感興趣的朋友參考下吧
2017-08-08
vue項目純前端實現的模板打印功能示例代碼
在Vue項目中,通過使用vue-print-nb插件,可以實現頁面的打印功能,這篇文章主要介紹了vue項目純前端實現的模板打印功能的相關資料,需要的朋友可以參考下
2024-10-10
vue 解決異步數據更新問題
今天小編就為大家分享一篇vue 解決異步數據更新問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
vue中i18n的安裝與幾種使用方式詳解
在一些網站經常可以看到切換語言包,將網站轉化成多種語言版本的情況,下面這篇文章主要給大家介紹了關于vue中i18n的安裝與幾種使用方式的相關資料,需要的朋友可以參考下
2022-09-09
vue表單自定義校驗規(guī)則介紹
今天小編就為大家分享一篇vue表單自定義校驗規(guī)則介紹，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
解決electron打包vue-element-admin項目頁面無法跳轉的問題小結
這篇文章主要介紹了解決electron打包vue-element-admin項目頁面無法跳轉的問題小結,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2024-03-03
vue前臺顯示500和405錯誤的解決(springboot為后臺)
這篇文章主要介紹了vue前臺顯示500和405錯誤的解決(springboot為后臺)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-07-07

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue學習筆記進階篇之單元素過度

相關文章

最新評論

大家感興趣的內容

最近更新的內容

常用在線小工具