动画效果

1、案例1

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>动画</title>
    <style>
        /* 进入动画生效时的样式，持续时间1秒 */
        .myname-enter-active {
            animation: bounce-in 1s;
        }

        /* 离开动画生效时的样式，持续时间1秒，reverse表示定义的动画的逆向效果*/
        .myname-leave-active {
            animation: bounce-in .5s reverse;
        }

        /* 动画效果 */
        @keyframes bounce-in {

            /* 
            动画效果：
            正向：时间的百分比,1秒为例,0秒时不显示,0.5秒时放大1.5倍,1秒时显示原大小
            逆向：时间的百分比,1秒为例,0秒时显示原大小,0.5秒时放大1.5倍,1秒时消失
            */
            0% {
                transform: scale(0);
            }

            50% {
                transform: scale(1.5);
            }

            100% {
                transform: scale(1);
            }
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="showFlag = !showFlag">按钮</button><br>
        <!--对需要动画的元素用transition标签包裹，并给一个自定义的name属性-->
        <transition name="myname">
            <p v-show="showFlag" style="display: inline-block;">我是动画</p>
        </transition>
    </div>
    <script src="../js/vue.js" type="text/javascript"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                showFlag: true
            },
            methods: {
            }
        });
    </script>
</body>

</html>

 

posted @ 2020-03-13 23:13  牛牛的自留地  阅读(114)  评论(0)  编辑  收藏  举报