一、基本动画
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动画组件支持对多个元素同时进行动画效果，使用
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动画组件的使用有了更深的了解。
