vue动画实现方式

<!DOCTYPE html>
<html lang="zh-cn">

    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="animate.css">
        <style>
        * {
            margin: 0;
            padding: 0;
        }
        #app{
            width: 600px;
            margin: 100px auto;
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        button {
            width: 50px;
            height: 30px;
        }
        /* 第二步 定义入场动画 和 出场动画 */
        /* 格式： 动画名-enter 入场动画*/
        /* 格式： 动画名-leave 出场动画*/
        /* 进入过渡开始时的状态和离开过渡结束时的状态 */
        .fade-enter,.fade-leave-to{
            opacity: 0;
            transform:translate(500px, 0);
        }
        /* 进入过渡中的效果和离开过渡中的效果 */
        .fade-enter-active,.fade-leave-active{
           transition: all 0.8s;
        }
         /* 进入过渡结束时的状态和离开过渡结束时的状态 */
         .fade-enter-to,.fade-leave{
            opacity: 1;
         }

        .bounce-enter-active{
            animation: bounce-in .5s;
        }
        .bounce-leave-active {
            animation: bounce-in .5s reverse;
        }
        @keyframes bounce-in{
              0% {
                transform: scale(0);
              }
              50% {
                transform: scale(1.5);
              }
              100% {
                transform: scale(1);
              }
        }
            .pp{
                background-color: #c05;
            }
        </style>
    </head>

    <body>
        <div id="app">
            <!-- 1.过渡 -->
            <button @click="isShow = !isShow">过渡</button>
            <!-- 第一步给要动画的元素 起个动画名子 -->
            <!-- 格式:  name=动画名 -->
            <transition name="fade" :duration="3000">
                <p class="box" v-show="isShow">我要过渡</p>
            </transition>
            <hr>
            <!-- 2.动画 -->
            <button @click="isShow2 = !isShow2">动画</button>
            <!-- 第一步给要动画的元素 起个动画名子 -->
            <!-- 格式:  name=动画名 -->
            <transition name="bounce" :duration="{ enter: 1000, leave: 1800 }">
                <p class="box" v-if="isShow2">我要运动</p>
            </transition>
            <!-- 3.自定义过渡 类名 -->
            <button @click="show = !show">自定义</button>
            <transition
                enter-active-class="animated tada"
                leave-active-class="animated bounceOutRight"
            >
                <p v-if="show" class="pp">hello</p>
            </transition>
    
        </div>

        <script src="velocity.js"></script>
        <script src="vue.js"></script>
        <script>
        var vm = new Vue({
            data: {
                isShow: true,   //过渡
                isShow2:true,   //动画
                show:true,
            },
            methods: {

            }
        }).$mount('#app');

        </script>
    </body>

</html>
来源：https://www.cnblogs.com/lguow/p/11963175.html
标签
动画
动漫
vue