一、过度
vue提供了 transition的封装组件
所有关于过度的动画都是通过transition组件设置的
几种能够能够过度的场景
- 条件渲染 (使用
v-if
) - 条件展示 (使用
v-show
) - 动态组件
- 组件根节点
基本使用
<div>
<button @click="show">显示隐藏</button>
<transition>
<div class="box" v-if="isShow"></div>
</transition>
</div>
transition组件嵌套一个div,这个标签通过设置css样式进行过度显示
过度效果
.v-enter-active, .v-leave-active {
transition: opacity .5s;
}
.v-enter, .v-leave-to /* .v-leave-active below version 2.1.8 */ {
opacity: 0;
}
以上属性不是自定义的而是vue提供给我们设置 transition 组件用的
Vue 的transition组件实现过渡的机理
Vue 的transition组件会自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名
官网提供了一些class类名
- v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。
- v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。
- v-enter-to:2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。
- v-leave:定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。
- v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。
- v-leave-to:2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除
如果transition组件中有name属性,name属性的值 设置对应的css 属性的时候要将v-替换为设置的对应属性加-比如设置一个 fade的name属性
<template>
<div>
<button @click="show">显示隐藏</button>
<transition name="fade">
<div class="box" v-if="isShow"></div>
</transition>
</div>
</template>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .v-leave-active below version 2.1.8 */ {
opacity: 0;
}
例:利用过度实现一个简单动画效果
<template>
<div>
<button @click="show">显示隐藏</button>
<transition name="slide-fade">
<div class="box" v-if="isShow"></div>
</transition>
</div>
</template>
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
transform: translateX(10px);
opacity: 0;
}
二、动画
动画和过度使用方法类似,区别在于css动画用法同css 过度 在动画中 v-enter类名在节点插入DOM后不会立即删除,而是在animationend 事件触发时删除
基本使用
<template>
<div>
<button @click="show">显示隐藏</button>
<transition name="bounce">
<div class="box" v-if="isShow"></div>
</transition>
</div>
</template>
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
利用第三方库加类名进行vue动画的开发
enter-class
enter-active-class
enter-to-class
leave-class
leave-active-class
leave-to-class
例:使用animate 第三方库辅助开发
在组件中引入css库
<style scoped>
@import "./css/animate.css";
.box{
width: 300px;
height: 300px;
background: skyblue;
margin-top: 15px;
}
</style>
在transition组件中使用类名属性添加对应库的类名
<template>
<div>
<button @click="show">显示隐藏</button>
<transition
name="custom-classes-transition"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight" >
<div class="box" v-if="isShow"></div>
</transition>
</div>
</template>
在类名属性中添加对应的类名,第一个animated属性,就是代码让该元素/组件具有动画状态,第二个属性就是运动的状态
如果同时设置了过度和动画,此时可以设置type属性进行区分监听
- type 为transition则代表监听过渡的
- type为 animation则代表监听动画的
参考链接:Animate.css动画演示
动画可以定制进入和移出的持续时间
<transition :duration="{ enter: 500, leave: 800 }">...</transition>
JavaScript 钩子
使用方法
<template>
<div>
<button @click="show">显示隐藏</button>
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<div class="box" v-if="isShow"></div>
</transition>
</div>
</template>
<script>
export default {
data(){
return{
isShow:true
}
},
methods: {
show(){
this.isShow = !this.isShow
},
// --------
// 进入中
// --------
beforeEnter: function (el) {
console.log(el)
// ...
},
// 当与 CSS 结合使用时
// 回调函数 done 是可选的
enter: function (el, done) {
console.log(el)
// ...
done()
},
afterEnter: function (el) {
console.log(el)
// ...
},
enterCancelled: function (el) {
console.log(el)
// ...
},
// --------
// 离开时
// --------
beforeLeave: function (el) {
console.log(el)
// ...
},
// 当与 CSS 结合使用时
// 回调函数 done 是可选的
leave: function (el, done) {
console.log(el)
// ...
done()
},
afterLeave: function (el) {
console.log(el)
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
console.log(el)
// ...
}
}
}
</script>
在使用函数钩子设置动画或者过渡的时候当只用 ,在 enter 和 leave 中必须使用 done 进行回调。否则,它们将被同步调用,过渡会立即完成。
el是设置的节点名称,done当前函数的回调