真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

Vue學(xué)習(xí)筆記進(jìn)階篇之單元素過度

概述

在清原等地區(qū),都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局,加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力,以專注、極致的服務(wù)理念,為客戶提供成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站 網(wǎng)站設(shè)計(jì)制作按需開發(fā),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),營(yíng)銷型網(wǎng)站,外貿(mào)營(yíng)銷網(wǎng)站建設(shè),清原網(wǎng)站建設(shè)費(fèi)用合理。

Vue 在插入、更新或者移除 DOM 時(shí),提供多種不同方式的應(yīng)用過渡效果。

包括以下工具:

  1. 在 CSS 過渡和動(dòng)畫中自動(dòng)應(yīng)用 class
  2. 可以配合使用第三方 CSS 動(dòng)畫庫(kù),如 Animate.css
  3. 在過渡鉤子函數(shù)中使用 JavaScript 直接操作 DOM
  4. 可以配合使用第三方 JavaScript 動(dòng)畫庫(kù),如 Velocity.js

單元素/組件的過度

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

  1. 條件渲染 (使用 v-if)
  2. 條件展示 (使用 v-show)
  3. 動(dòng)態(tài)組件
  4. 組件根節(jié)點(diǎn)

這里是一個(gè)典型的例子:

hello

new Vue({
  el:'#app1',
  data:{
    show:true
  }
})
.fade-enter-active, .fade-leave-active{
  transition: opacity 2s;
}
.fade-enter, .fade-leave-to{
  opacity: 0;
}

運(yùn)行結(jié)果如下:

Vue學(xué)習(xí)筆記進(jìn)階篇之單元素過度

點(diǎn)擊toggle按鈕會(huì)看見文字淡入淡出的效果。

當(dāng)插入或刪除包含在 transition 組件中的元素時(shí),Vue 將會(huì)做以下處理:

  1. 自動(dòng)嗅探目標(biāo)元素是否應(yīng)用了 CSS 過渡或動(dòng)畫,如果是,在恰當(dāng)?shù)臅r(shí)機(jī)添加/刪除 CSS 類名。
  2. 如果過渡組件提供了 JavaScript 鉤子函數(shù),這些鉤子函數(shù)將在恰當(dāng)?shù)臅r(shí)機(jī)被調(diào)用。
  3. 如果沒有找到 JavaScript 鉤子并且也沒有檢測(cè)到 CSS 過渡/動(dòng)畫,DOM 操作(插入/刪除)在下一幀中立即執(zhí)行。(注意:此指瀏覽器逐幀動(dòng)畫機(jī)制,和Vue的 nextTick 概念不同)

過度的CSS類名

  1. v-enter: 定義進(jìn)入過渡的開始狀態(tài)。在元素被插入時(shí)生效,在下一個(gè)幀移除。
  2. v-enter-active: 定義過渡的狀態(tài)。在元素整個(gè)過渡過程中作用,在元素被插入時(shí)生效,在 transition/animation 完成之后移除。 這個(gè)類可以被用來定義過渡的過程時(shí)間,延遲和曲線函數(shù)。
  3. v-enter-to: 2.1.8版及以上 定義進(jìn)入過渡的結(jié)束狀態(tài)。在元素被插入一幀后生效(于此同時(shí) v-enter 被刪除),在 transition/animation 完成之后移除。
  4. v-leave: 定義離開過渡的開始狀態(tài)。在離開過渡被觸發(fā)時(shí)生效,在下一個(gè)幀移除。
  5. v-leave-active: 定義過渡的狀態(tài)。在元素整個(gè)過渡過程中作用,在離開過渡被觸發(fā)后立即生效,在 transition/animation 完成之后移除。 這個(gè)類可以被用來定義過渡的過程時(shí)間,延遲和曲線函數(shù)。
  6. v-leave-to: 2.1.8版及以上 定義離開過渡的結(jié)束狀態(tài)。在離開過渡被觸發(fā)一幀后生效(于此同時(shí) v-leave 被刪除),在 transition/animation 完成之后移除。

Vue學(xué)習(xí)筆記進(jìn)階篇之單元素過度

對(duì)于這些在 enter/leave 過渡中切換的類名,v- 是這些類名的前綴。使用

CSS過度

常用的過渡都是使用 CSS 過渡。以下為示例代碼。

CSS 過渡

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;
    }

運(yùn)行結(jié)果

Vue學(xué)習(xí)筆記進(jìn)階篇之單元素過度

點(diǎn)擊按鈕就會(huì)看到動(dòng)畫效果。

CSS動(dòng)畫

CSS 動(dòng)畫用法同 CSS 過渡,區(qū)別是在動(dòng)畫中 v-enter 類名在節(jié)點(diǎn)插入 DOM 后不會(huì)立即刪除,而是在 animationend 事件觸發(fā)時(shí)刪除。

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

css 動(dòng)畫

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

運(yùn)行結(jié)果:

Vue學(xué)習(xí)筆記進(jìn)階篇之單元素過度

自定義過渡類名

我們可以通過以下特性來自定義過渡類名:

  • 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)先級(jí)高于普通的類名,這對(duì)于 Vue 的過渡系統(tǒng)和其他第三方 CSS 動(dòng)畫庫(kù),如 Animate.css 結(jié)合使用十分有用。
示例:


自定義過渡類名

new Vue({
  el:'#app4',
  data:{
    show:true
  }
})

運(yùn)行結(jié)果:

Vue學(xué)習(xí)筆記進(jìn)階篇之單元素過度

animate.css的學(xué)習(xí)可以參考官網(wǎng):https://daneden.github.io/animate.css/

javascript鉤子

可以在屬性中聲明 JavaScript 鉤子


 

methods: {
 // --------
 // 進(jìn)入中
 // --------
 beforeEnter: function (el) {
  // ...
 },
 // 此回調(diào)函數(shù)是可選項(xiàng)的設(shè)置
 // 與 CSS 結(jié)合時(shí)使用
 enter: function (el, done) {
  // ...
  done()
 },
 afterEnter: function (el) {
  // ...
 },
 enterCancelled: function (el) {
  // ...
 },
 // --------
 // 離開時(shí)
 // --------
 beforeLeave: function (el) {
  // ...
 },
 // 此回調(diào)函數(shù)是可選項(xiàng)的設(shè)置
 // 與 CSS 結(jié)合時(shí)使用
 leave: function (el, done) {
  // ...
  done()
 },
 afterLeave: function (el) {
  // ...
 },
 // leaveCancelled 只用于 v-show 中
 leaveCancelled: function (el) {
  // ...
 }
}

這些鉤子函數(shù)可以結(jié)合 CSS transitions/animations 使用,也可以單獨(dú)使用。

當(dāng)只用 JavaScript 過渡的時(shí)候, 在 enter和leave 中,回調(diào)函數(shù) done 是必須的 。 否則,它們會(huì)被同步調(diào)用,過渡會(huì)立即完成。

推薦對(duì)于僅使用 JavaScript 過渡的元素添加 v-bind:css="false",Vue 會(huì)跳過 CSS 的檢測(cè)。這也可以避免過渡過程中 CSS 的影響。

一個(gè)使用 Velocity.js 的簡(jiǎn)單例子:

javascript 鉤子使用



運(yùn)行結(jié)果:

Vue學(xué)習(xí)筆記進(jìn)階篇之單元素過度

初始渲染的過度

可以通過appear 特性設(shè)置節(jié)點(diǎn)的在初始渲染的過渡

這里默認(rèn)和進(jìn)入和離開過渡一樣,同樣也可以自定義 CSS 類名。


 

自定義 JavaScript 鉤子:


 

示例代碼:


初始畫面

new Vue({
  el:'#app6',
  data:{
    show:true
  }
})

運(yùn)行結(jié)果:

Vue學(xué)習(xí)筆記進(jìn)階篇之單元素過度

在界面加載該元素時(shí),會(huì)有個(gè)過渡效果。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。


分享名稱:Vue學(xué)習(xí)筆記進(jìn)階篇之單元素過度
瀏覽地址:http://weahome.cn/article/pehdcj.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部