vue巧用過(guò)渡效果的示例分析-創(chuàng)新互聯(lián)

這篇文章主要介紹vue巧用過(guò)渡效果的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

10年積累的網(wǎng)站建設(shè)、做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先做網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有杞縣免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

vue提供的了transition組件來(lái)實(shí)現(xiàn)組件的過(guò)渡和路由的過(guò)渡，合理使用這個(gè)組建可以讓我們的頁(yè)面更加的靈活，提高用戶體驗(yàn)。

概念

在進(jìn)入/離開(kāi)的過(guò)渡中，會(huì)有6個(gè)class的切換，抄一張官方的圖

vue巧用過(guò)渡效果的示例分析

v-enter：定義進(jìn)入過(guò)渡的開(kāi)始狀態(tài)。在元素被插入之前生效，在元素被插入之后的下一幀移除。
v-enter-active：定義進(jìn)入過(guò)渡生效時(shí)的狀態(tài)。在整個(gè)進(jìn)入過(guò)渡的階段中應(yīng)用，在元素被插入之前生效，在過(guò)渡/動(dòng)畫(huà)完成之后移除。這個(gè)類可以被用來(lái)定義進(jìn)入過(guò)渡的過(guò)程時(shí)間，延遲和曲線函數(shù)。
v-enter-to: 2.1.8版及以上定義進(jìn)入過(guò)渡的結(jié)束狀態(tài)。在元素被插入之后下一幀生效 (與此同時(shí) v-enter 被移除)，在過(guò)渡/動(dòng)畫(huà)完成之后移除。
v-leave: 定義離開(kāi)過(guò)渡的開(kāi)始狀態(tài)。在離開(kāi)過(guò)渡被觸發(fā)時(shí)立刻生效，下一幀被移除。
v-leave-active：定義離開(kāi)過(guò)渡生效時(shí)的狀態(tài)。在整個(gè)離開(kāi)過(guò)渡的階段中應(yīng)用，在離開(kāi)過(guò)渡被觸發(fā)時(shí)立刻生效，在過(guò)渡/動(dòng)畫(huà)完成之后移除。這個(gè)類可以被用來(lái)定義離開(kāi)過(guò)渡的過(guò)程時(shí)間，延遲和曲線函數(shù)。
v-leave-to: 2.1.8版及以上定義離開(kāi)過(guò)渡的結(jié)束狀態(tài)。在離開(kāi)過(guò)渡被觸發(fā)之后下一幀生效 (與此同時(shí) v-leave 被刪除)，在過(guò)渡/動(dòng)畫(huà)完成之后移除。

看起來(lái)還是有有點(diǎn)亂，先來(lái)捋一下。

vue巧用過(guò)渡效果的示例分析

enter 定義開(kāi)始的狀態(tài)， active定義過(guò)程， enter定義結(jié)束，但是在實(shí)際進(jìn)行的時(shí)候是有交叉的。通過(guò)斷點(diǎn)可以發(fā)現(xiàn)，

添加v-enter
添加v-enter-active,
卸載v-enter
添加v-ernter-to
卸載v-enter-to和v-enter-active

// transition: all 2s; 
 .move-enter {
  margin-left: 0;
 }
 .move-enter-active {
  margin-left: 100px;
 }
 .move-enter-to {
  margin-left: 200px;
 }

例如在上面這種情況下，過(guò)渡動(dòng)畫(huà)會(huì)怎么進(jìn)行呢？

vue巧用過(guò)渡效果的示例分析

這里要注意兩點(diǎn)。

enter-active覆蓋掉了enter的起點(diǎn)位置
一共經(jīng)過(guò)了兩次過(guò)渡， enter-to是在active結(jié)束之后開(kāi)始的，所以第四秒，才回到dom元素本身的位置。

所以官方文檔之，也是使用v-enter定義起點(diǎn)位置，在enter-active中控制效果。

利用class實(shí)現(xiàn)過(guò)渡效果

在這6個(gè)class之上，利用transition或者動(dòng)畫(huà)，都可以實(shí)現(xiàn)我們需要的效果。舉個(gè)栗子，這里我們直接將所有的路由改變都定義一個(gè)過(guò)渡效果，

appear屬性表示頁(yè)面初次加載的時(shí)候也適用于動(dòng)畫(huà)

@keyframes animationIn {
 0% {
 transform: translate(-100%, 0);
 }
 100% {
 transform: translate(0, 0);
 }
}
@keyframes animationOut {
 0% {
 transform: translate(0, 0);
 }
 100% {
 transform: translate(100%, 0);
 }
}

.move-enter {
 transform: translate(-100%, 0);
 position: absolute!important;
 z-index: 999;
 top: 0;
 left: 0;
 width: 100%;
}
.move-enter-active {
 animation: animationIn 0.2s;
 position: absolute!important; // 進(jìn)入的組件要覆蓋掉移除的組件，參考 //https://cn.vuejs.org/v2/guide/transitions.html#%E8%BF%87%E6%B8%A1%E6%A8%A1%E5%BC%8F
 z-index: 999;
 top: 0;
 left: 0;
 width: 100%;
}
.move-leave {
 transform: translate(0, 0);
}
.move-leave-active {
 animation: animationOut 0.2s;
}

效果

vue巧用過(guò)渡效果的示例分析

JavaScript 鉤子

這些鉤子函數(shù)可以結(jié)合 CSS transitions/animations 使用

在這些鉤子中，可以使用其他第三方庫(kù)，回調(diào)中的el將是真實(shí)的dom元素舉個(gè)栗子, 這里使用了官方推薦的Velocity.js作為動(dòng)畫(huà)庫(kù)

切換

 methods: {
  start() {
  this.show = !this.show
  },
  handleBeforeEnter: function (el) {
  el.style.opacity = 0;
  console.log('方塊顯示動(dòng)畫(huà)即將執(zhí)行');
  },
  handleEnter: function (el, done) {
  Velocity(el, 'stop');
  Velocity(el, {
   backgroundColor: '#0085eb',
   opacity: 1,
   translateX: 260,
   rotateZ: ['360deg', 0]
  }, {
   duration: 1000,
   easing: [ 0.4, 0.01, 0.165, 0.99 ],
   complete: done
  });
  console.log('方塊顯示動(dòng)畫(huà)執(zhí)行中...');
  },
  handleAfterEnter: function (el) {
  console.log('方塊顯示動(dòng)畫(huà)結(jié)束');
  },
  handleBeforeLeave: function (el) {
  console.log('方塊隱藏動(dòng)畫(huà)即將執(zhí)行');
  },
  handleLeave: function (el, done) {
  Velocity(el, 'stop');
  Velocity(el, {
   backgroundColor: '#4dd0e1',
   opacity: 0,
   translateX: 0,
   rotateZ: [0, '360deg']
  }, {
   duration: 1000,
   easing: [ 0.4, 0.01, 0.165, 0.99 ],
   complete: done
  });
  console.log('方塊隱藏動(dòng)畫(huà)執(zhí)行中...');
  },
  handleAfterLeave: function (el) {
  console.log('方塊隱藏動(dòng)畫(huà)結(jié)束');
  }
 }

vue巧用過(guò)渡效果的示例分析

列表過(guò)渡

vue還提供了transition-group組件，作為列表過(guò)渡的容器

不同于，它會(huì)以一個(gè)真實(shí)元素呈現(xiàn)：默認(rèn)為一個(gè) 。你也可以通過(guò) tag 特性更換為其他元素

transition-group 擁特別的v-move屬性，它會(huì)在元素的改變定位的過(guò)程中應(yīng)用，效果可參見(jiàn)官網(wǎng)。

其他的就不抄官網(wǎng)了

列表過(guò)渡中，可以結(jié)合js鉤子，實(shí)現(xiàn)一些特殊的效果

舉個(gè)栗子


 import Vue from "vue";
 export default Vue.extend({
 name: "home",
 data() {
  return {
  show: true,
  list: [5,4,3,2,1],
  nextNum: 6
  };
 },
 methods: {
  showDom() {
  this.show = !this.show
  },
  beforeEnter: function (el: any) {
  el.style.opacity = 0 // 每個(gè)元素插入之前， 透明度為0
  let index = el.dataset.index 每次可能插入多個(gè)元素，
  // 頁(yè)面加載時(shí)先展示5個(gè)
  if (index < 5) {
   //設(shè)置動(dòng)畫(huà)延遲， 實(shí)現(xiàn)按續(xù)插入的效果
   el.style.animationDelay = el.dataset.index * 0.3 + 's'
  }
  },
  afterEnter: function (el) {
  el.style.opacity = 1
  console.log('afterEnter')
  },
  addItem() {
  this.list.push(this.nextNum++)
  },
  sort() {
  this.list = this.list.sort((a, b) => a -b)
  }
 }
 });

 @keyframes animat {
 0% {
  margin-left: 300px;
  opacity: 0;
 }
 100% {
  margin-left: 0;
  opacity: 1;
 }
 }
 .fade-enter {
 opacity: 0;
 margin-left: 300px;
 }
 .fade-enter-active {
 opacity: 0;
 animation: animat 1s;
 }
 .fade-enter-to {
 opacity: 1;
 margin-left: 0;
 }

 .fade-move {
 transition: all 0.3s;
 }
 .fade-leave {
 left: 10px;
 }
 .fade-leave-active {
 transition: all 2s ease-out;
 }
 .fade-leave-to {
 left: -100%;
 }

效果

vue巧用過(guò)渡效果的示例分析

以上是“vue巧用過(guò)渡效果的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前名稱：vue巧用過(guò)渡效果的示例分析-創(chuàng)新互聯(lián)
文章分享：http://www.xueling.net.cn/article/dgcods.html

老熟女激烈的高潮_日韩一级黄色录像_亚洲1区2区3区视频_精品少妇一区二区三区在线播放_国产欧美日产久久_午夜福利精品导航凹凸

重慶分公司，新征程啟航

vue巧用過(guò)渡效果的示例分析-創(chuàng)新互聯(lián)

其他資訊