元素在显示和隐藏时，实现过滤或者动画的效果。 常用的过渡和动画都是使用 CSS 来实现的
-
在 CSS 中操作 transition （过渡 ）或 animation （动画）达到不同效果
-
为目标元素添加一个父元素 , 让父元素通过自动应用 class 类名来达到效果
-
过渡与动画时，会为对应元素动态添加的相关 class 类名：
- xxx-enter ：定义显示前的效果。
- xxx-enter-active ：定义显示过程的效果。
- xxx-enter-to : 定义显示后的效果。
- xxx-leave : 定义隐藏前的效果。
- xxx-leave-active ：定义隐藏过程的效果。
- xxx-leave-to :定义隐藏后的效果。
过渡效果案例
1.为目标元素添加父元素 <transition name="xxx">
2.定义 class 过渡样式
- 指定过渡样式: transition
- 指定隐藏时的样式: opacity(持续的时间)/其它
3.功能实现 点击按钮后, 显示隐藏文本 效果1：显示和隐藏有渐变效果 效果2：显示和隐藏的有平移效果，并持续时长不同
<head>
<meta charset="UTF-8">
<title>过渡效果</title>
<style>
/*显示或隐藏的过渡效果*/
.mxg-enter-active, .mxg-leave-active {
transition: opacity 1s; /*过渡，渐变效果 1秒*/
}
/*显示前或隐藏后的效果*/
.mxg-enter, .mxg-leave-to {
opacity: 0 /*都是隐藏效果*/
}
/* 可以设置不同的进入和离开动画 */
/*显示过渡效果*/
.meng-enter-active{
transition: all 1s; /*all 所有效果，持续1秒 */
}
/*隐藏过渡效果*/
.meng-leave-active {
transition: all 5s;
}
/*显示前或隐藏后的效果*/
.meng-enter, .meng-leave-to {
opacity: 0; /*都是隐藏效果*/
transform: translateX(10px); /*水平方向 X 坐标移动10px*/
}
</style>
</head>
<body>
<div id="app1">
<button @click="show = !show">渐变过渡</button>
<!--在目标元素上添加此元素，结合name值来指定样式-->
<transition name="mxg">
<p v-if="show">mengxuegu</p>
</transition>
</div>
<br>
<!--可以设置不同的进入和离开动画 -->
<div id="app2">
<button @click="show = !show">渐变平滑过渡</button>
<!--在目标元素上添加此元素，结合name值来指定样式-->
<transition name="meng">
<p v-if="show">mengxuegu</p>
</transition>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm1 = new Vue({
el: '#app1',
data: {
show: true
}
})
var vm2 = new Vue({
el: '#app2',
data: {
show: true
}
})
</script>
</body>
动画效果案例
CSS 动画用法同 CSS 过渡，只不过采用 animation 为指定动画效果
功能实现： 点击按钮后, 文本内容有放大缩小效果
注意：官网上面源码有问题，要在 <p> 元素上增加样式 style="display: inline-block"
<head>
<meta charset="UTF-8">
<title>动画效果</title>
<style>
/*显示过程中的动画效果*/
.bounce-enter-active {
animation: bounce-in 1s; /*bounce-in引用了下面@keyframes中定义的持续3秒*/
}
/*隐藏过程中的动画效果*/
.bounce-leave-active {
animation: bounce-in 3s reverse; /*reverse 相反的顺序*/
}
@keyframes bounce-in {
0% { /*持续时长的百分比，如持续1s，0%表示当0秒，50%表示当0.5秒，100%表示当1秒*/
transform: scale(0); /*缩小为0*/
}
50% {
transform: scale(1.5); /*放大1.5倍*/
}
100% {
transform: scale(1); /*原始大小*/
}
}
</style>
</head>
<body>
<div id="example-2">
<button @click="show = !show">放大缩小动画</button>
<br>
<transition name="bounce">
<p v-if="show" style="display: inline-block">
不断学习
</p>
</transition>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#example-2',
data: {
show: true
}
})
</script>
</body>
