methods: {
  start() {
  this.show = !this.show
  },
  handleBeforeEnter: function (el) {
  el.style.opacity = 0;
  console.log('方塊顯示動畫即將執(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('方塊顯示動畫執(zhí)行中...');
  },
  handleAfterEnter: function (el) {
  console.log('方塊顯示動畫結束');
  },
  handleBeforeLeave: function (el) {
  console.log('方塊隱藏動畫即將執(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('方塊隱藏動畫執(zhí)行中...');
  },
  handleAfterLeave: function (el) {
  console.log('方塊隱藏動畫結束');
  }
 }

列表過渡

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

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

transition-group 擁特別的v-move屬性，它會在元素的改變定位的過程中應用， 效果可參見官網。

其他的就不抄官網了

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

舉個栗子

 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 // 每個元素插入之前， 透明度為0
  let index = el.dataset.index 每次可能插入多個元素，
  // 頁面加載時先展示5個
  if (index < 5) {
   //設置動畫延遲， 實現(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巧用過渡效果的方法”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！