在CSS中操作transition（过渡）或 animation（动画）达到不同效果
为目标元素添加一个父元素<trasition name="xxx">，让父元素通过自动应用class类名来达到效果
过滤与动画时，会为对应元素动态的添加相关class类名
xxx-enter：定义显示前的效果
xxx-enter-active：定义显示过程的效果
xxx-enter-to：定义显示后的效果
xxx-leave：定义隐藏前的效果
xxx-leave-active：定义隐藏过程的效果
xxx-leave-to：定义隐藏后的效果
<
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
="./node_modules/vue/dist/vue.js"
></
script
>
<
style
>
/*
显示或隐藏的过渡效果，zz就是下面定义的name值
*/
/*
.zz-enter-active进入中，.zz-leave-active离开中的效果
*/
.zz-enter-active, .zz-leave-active
{
transition
:
opacity 1s
;
/*
过渡，渐变效果持续时间为1s
*/
/*
显示前或隐藏后的效果
*/
/*
.zz-enter进入前，.zz-leave-to离开后
*/
.zz-enter, .zz-leave-to
{
opacity
:
0
;
/*
都是隐藏效果
*/
</
style
>
</
head
>
<
div
id
="app"
>
<
button
@click
="show =!show"
>
渐变过渡
</
button
>
<
transition
name
="zz"
>
<!--
name的值自定义，后面要用
-->
<
p
v-show
="show"
>
过渡一
</
p
>
<!--
v-show为false就不显示
-->
</
transition
>
</
div
>
<
script
>
new
Vue({
el:
"
#app
"
,
data: {
show:
true
,
</
script
>
</
body
>
</
html
>
过渡效果二
<!DOCTYPE html>
<html lang="en">
<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="./node_modules/vue/dist/vue.js"></script>
<style>
/* 可以针对显示和隐藏指定不同的效果 */
/* 显示过渡效果1s */
.zz-enter-active{
transition: all 1s; /* all所有属性，持续1s*/
/* 隐藏过渡效果3s */
.zz-leave-active{
transition: all 3s; /* all所有属性，持续3s */
/* 显示前和隐藏后的效果 */
.zz-enter, .zz-leave-to{
opacity: 0; /* 都是隐藏效果 */
transform: translateX(10px); /* 水平方向移动10px */
</style>
</head>
<div id="app">
<button @click="show =!show">渐变平滑过渡</button>
<transition name="zz"><!-- name的值自定义，后面要用 -->
<p v-show="show">过渡二</p> <!-- v-show为false就不显示 -->
</transition>
</div>
<script>
new Vue({
el: "#app",
data: {
show: true,
</script>
</body>
</html>
CSS动画用法同CSS过渡，只不过采用animation为指定动画效果
<!DOCTYPE html>
<html lang="en">
<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="./node_modules/vue/dist/vue.js"></script>
<style>
/* 显示过程中的动画效果 */
.zz-enter-active{
animation: zz-in 1s;
/* 隐藏过程中的动画效果 */
.zz-leave-active{
animation: zz-in 1s reverse;
@keyframes zz-in{
0% { /*持续时长百分比，比如针对1s： 0%代表0秒，50%代表0.5*/
transform: scale(0); /*缩小为0*/
50% {
transform: scale(1.5); /*放大1.5倍*/
100% {
transform: scale(1); /*原始大小*/
</style>
</head>
<div id="app">
<button @click="show =!show">放大缩小动画</button>
<transition name="zz"><!-- name的值自定义，后面要用 -->
<p v-show="show">我是动画</p> <!-- v-show为false就不显示 -->
</transition>
</div>
<script>
new Vue({
el: "#app",
data: {
show: true,
</script>
</body>
</html>
