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>
巴特西

vue动画实现方式

最新文章

热门文章
