Vue動畫組件詳解

一、基本動畫

1、Vue動畫組件是Vue.js自帶的動畫庫，為頁面中的元素添加類名達到動態效果。可以使用transition或者animation標籤包裹需要添加動畫的元素。

2、transition標籤需要定義name屬性，在CSS中定義進入動畫和離開動畫的類名，Vue.js會根據定義的類名和vue生命周期函數給需要添加動畫的元素添加類名。如下所示：

/*CSS樣式*/
.fade-enter-active, .fade-leave-active {/*定義進入和離開的過渡狀態*/
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /*同一過渡方向樣式*/
/*定義元素進入和離開的樣式*/
  opacity: 0;
}

  
Vue動畫組件

3、animation標籤需要定義animation屬性，在CSS中定義動畫的keyframe，Vue.js會根據定義的keyframe和duration、timing-function、delay屬性值給需要添加動畫的元素添加類名。如下所示：

/*CSS樣式*/
.slide-fade-enter, .slide-fade-leave-active {/*定義進入和離開的過渡狀態*/
  animation: slide-fade .5s ease-in-out;
}
@keyframes slide-fade {/*定義動畫的keyframe*/
  from {
    opacity:0;
    transform: translateY(10%);
  }
  to {
    opacity:1;
    transform: translateY(0);
  }
}

  
Vue動畫組件

二、動畫模式

1、Vue動畫組件支持四種動畫模式，可以通過appear、mode屬性控制：

a) transition模式：只對添加/刪除的元素進行動畫過渡。

b) animation模式：添加/刪除的元素和外層包裹元素都進行動畫過渡。

c) in-out模式：新元素先進行進入動畫，完成後舊元素進行離開動畫。

d) out-in模式：舊元素先進行離開動畫，完成後新元素進行進入動畫。

2、appear屬性：可以指定元素是否在初始渲染時進行動畫。

3、下面的示例演示了in-out模式的動畫效果：

.fade-enter-active, .fade-leave-active {/*定義進入和離開的過渡狀態*/
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}



  切換元素
  
Vue動畫組件

三、多個元素動畫

1、Vue動畫組件支持對多個元素同時進行動畫效果，使用標籤包裹多個元素。需要指定name屬性和tag屬性。

2、下面的示例演示了多個元素同時進行動畫的效果：

/*CSS樣式*/
.list-enter-active, .list-leave-active {
  transition:all .5s;
}
.list-enter, .list-leave-to {
  opacity:0;
  transform:translateY(30px);
}



  
    

      {{item.text}}
      刪除
    
  

四、JavaScript鉤子函數

1、Vue動畫組件支持JavaScript鉤子函數，在動畫過程中JavaScript代碼也可以參與到動畫效果中。

2、下面的示例演示了JavaScript鉤子函數：

/*CSS樣式*/
.slide-enter-active {
  /*transition:all .5s;*/
  /*動畫效果已經由JS鉤子函數實現，可以把原有的transition刪除*/
}
.slide-enter, .slide-leave-to { 
  transform:translateX(100%);
  opacity:0;
}

/*JS代碼*/
methods:{
  beforeEnter:function(el) {
    el.style.opacity=0;
    el.style.transform="translateX(100%)";
  },
  enter:function(el, done) {
    /*done函數在動畫完成後調用*/
    Velocity(el, {opacity:1,translateX:"0"}, {duration:500, complete:done})
  },
  leave:function(el, done) { 
    Velocity(el, {opacity:0,translateX:"-100%"}, {duration:500, complete:done})
  }
}



  
Vue動畫組件

五、組合動畫

1、Vue動畫組件支持不同動畫效果的組合使用。

2、下面的示例演示了組合動畫的效果：

/*CSS樣式*/
.hover-enter-active, .hover-leave-active {
  transition:all .5s;
}
.hover-enter, .hover-leave-to { 
  opacity:0;
  transform:translateY(30px);
}

/*JS代碼*/
methods:{
  beforeEnter:function(el) {
    el.style.opacity=0;
    el.style.transform="translateY(30px) rotateX(-90deg)";
  },
  enter:function(el, done) {
    /*done函數在動畫完成後調用*/
    Velocity(el, {opacity:1,transform:"translateY(0) rotateX(0)"}, {duration:500, complete:done})
  },
  leave:function(el, done) { 
    Velocity(el, {opacity:0,transform:"translateY(30px) rotateX(90deg)"}, {duration:500, complete:done})
  }
}



  
Vue動畫組件

六、總結

本文詳細闡述了Vue動畫組件的基本用法、動畫模式、多個元素動畫、JavaScript鉤子函數和組合動畫。通過本文的闡述，相信大家已經對Vue動畫組件的使用有了更深的了解。