vue--过滤与动画

什么是过渡和动画

元素在显示和隐藏时，实现过渡或者动画的效果，常用的过滤和动画都是使用CSS来实现的。

在CSS中操作transition（过渡）或 animation（动画）达到不同效果
为目标元素添加一个父元素<trasition name="xxx">，让父元素通过自动应用class类名来达到效果
过滤与动画时，会为对应元素动态的添加相关class类名
- xxx-enter：定义显示前的效果
- xxx-enter-active：定义显示过程的效果
- xxx-enter-to：定义显示后的效果
- xxx-leave：定义隐藏前的效果
- xxx-leave-active：定义隐藏过程的效果
- xxx-leave-to：定义隐藏后的效果

过渡效果一

<!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="./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>

<body>
    <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">

<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="./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>

<body>
    <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">

<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="./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>

<body>
    <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>