# 过渡效果动画
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。 单元素/组件的过渡 通过 vue 提供的组件 transition 来进行过渡
# 过渡的类名
- 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 被删除)，在过渡/动画完成之后移除。
- 过渡小案例 元素高度的变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="05-vue/lib/vue.js"></script>
<style>
.on {
color: red;
}
/* @keyframes fade{ // css3实现动画
0% {
opacity: 0;
}
100%{
opacity: 1;
}
}
p,h2{
animation: fade .3s ease-in;
} */
.fade-enter {
color: green;
}
.fade-enter-active {
opacity: 1;
transition: all 2s ease;
}
.fade-enter-to {
color: red;
}
.fade-leave {
color: blue;
}
.fade-leave-active {
opacity: 0;
transition: all 2s ease;
}
.fade-leave-to {
}
.box {
width: 100px;
height: 100px;
background: red;
}
h2 {
background: blue;
}
.hAuto-enter {
height: 0;
}
.hAuto-enter-to {
height: 100px;
}
.hAuto-enter-active,
.hAuto-leave-active {
transition: 5s ease-in;
}
.hAuto-leave {
height: 100px;
}
.hAuto-leave-to {
height: 0;
}
</style>
</head>
<body>
<div id="app">
<!-- <transition name="fade">
<p v-if="isShow">
元素1
</p>
<h2 v-else>
元素2
</h2>
</transition> -->
<button @click="isShow = !isShow">取反</button>
<transition name="hAuto" mode="out-in">
<div class="box" v-if="boxShow"></div>
<h2 v-else>h2标签</h2>
</transition>
<button @click="boxShow = !boxShow">div动画</button>
</div>
<script>
var vm = new Vue({
el: "#app",
data() {
return {
rootInfo: "我是根元素的属性",
isShow: false,
boxShow: true,
};
},
methods: {
alerts() {
alert(111);
},
},
});
</script>
</body>
</html>
# 结合animate.css实现复杂的动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="lib/vue.js"></script>
<style>
.animated{
animation-duration: 4s!important;
}
</style>
<link rel="stylesheet" href="https://daneden.github.io/animate.css/animate.min.css">
</head>
<body>
<div id="app">
<!-- enter-active-class 动画进入时将要执行的类名 -->
<!-- leave-active-class 动画离开时将要执行的类名 -->
<!-- duration 过渡持续时间 -->
<transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut"
:duration="{ enter : 4000 , leave : 3000}">
<div class="box" v-if="boxShow">
</div>
<h2 v-else>h2标签</h2>
</transition>
<button @click="boxShow = !boxShow">div动画</button>
</div>
<script>
var vm = new Vue({
el: "#app",
data(){
return {
rootInfo:"我是根元素的属性",
isShow:false,
boxShow:true
}
},
methods: {
alerts(){
alert(111)
}
},
});
</script>
</body>
</html>
← 处理边界情况 Vue 的可复用性与组合 →