Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。
- vue中常见的内置组件:
- transition
- keep-alive :防止重新渲染。
- router-view
- 单元素/组件过渡
- css过渡
- css动画
- 结合animate.css动画库
- transition组件使用动态绑定 name 的方式实现多组件之间的切换过渡效果,想要实现过渡效果需要配合过渡的css类名:
- name-enter:定义进入过渡的开始状态
- name-enter-active:定义进入活动状态
- name-enter-to:定义进入的结束状态
- name-leave:定义离开过渡的开始状态
- name-leave-active:定义离开的活动状态
- name-leave-to:定义离开的结束状态
- transition组件有两种过渡模式:使用 mode属性设置
- in-out:新元素先进入过渡,完成之后当前元素过渡离开,默认模式
- out-in:当前元素先进行过渡离开,离开完成后新元素过渡进入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
.kerwinfade-enter-active,
.kerwinfade-leave-active {
transition: all 1.5s;
}
.kerwinfade-enter,
.kerwinfade-leave-to {
opacity: 0;
transform: translateX(100px);
}
.kerwinbounce-enter-active {
animation: bounce-in .5s;
}
.kerwinbounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
opacity: 0;
transform: translateX(100px);
}
100% {
opacity: 1;
transform: translateX(0px);
}
}
</style>
</head>
<body>
<div id="box">
<button @click="isShow=!isShow">click</button>
<transition name="kerwinfade">
<div v-if="isShow">1111111111111</div>
</transition>
<transition name="kerwinbounce">
<div v-if="isShow">222222222</div>
</transition>
</div>
<script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#box",
data: {
isShow: false
}
})
</script>
</body>
</html>