过渡效果

1、案例1

<!DOCTYPE html>
<html>

<head>
    <!-- 
    过渡效果:
    myname-enter:进入过渡的开始状态
    myname-enter-active:进入过渡生效时的状态
    myname-enter-to:进入过渡的结束状态
    myname-leave:离开过渡的开始状态
    myname-leave-active:离开过渡生效时的状态
    myname-leave-to:离开过渡结束时的状态
    -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>过渡</title>
    <style>
        /* 进入过渡生效时和离开过渡生效时的样式 */
        .myname-enter-active,
        .myname-leave-active {
            transition: opacity 2s;
        }

        /* 进入过渡的开始状态和离开过渡的结束状态的样式 */
        .myname-enter,
        .myname-leave-to {
            opacity: 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="showFlag = !showFlag">按钮</button>
        <!--对需要过渡的元素用transition标签包裹，并给一个自定义的name属性-->
        <transition name="myname">
            <p v-show="showFlag">我是过渡</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>

 

2、案例2

<!DOCTYPE html>
<html>

<head>
    <!-- 
    过渡效果:
    myname-enter:进入过渡的开始状态
    myname-enter-active:进入过渡生效时的状态
    myname-enter-to:进入过渡的结束状态
    myname-leave:离开过渡的开始状态
    myname-leave-active:离开过渡生效时的状态
    myname-leave-to:离开过渡结束时的状态
    -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>过渡</title>
    <style>
        /* 进入过渡生效时和离开过渡生效时的样式 */
        .myname-enter-active {
            transition: opacity 5s;
        }

        .myname-leave-active {
            transition: opacity 1s;
        }

        /* 进入过渡的开始状态和离开过渡的结束状态的样式 */
        .myname-enter,
        .myname-leave-to {
            opacity: 0;
            transform: translateX(100px);
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="showFlag = !showFlag">按钮</button>
        <!--对需要过渡的元素用transition标签包裹，并给一个自定义的name属性-->
        <transition name="myname">
            <p v-show="showFlag">我是过渡</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 22:24  牛牛的自留地  阅读(131)  评论(0)  编辑  收藏  举报