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动画组件的使用有了更深的了解。