zoukankan      html  css  js  c++  java
  • 过渡效果

    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>
  • 相关阅读:
    jquery 全选反选 .prop('checked',!$(this).is(':checked'));
    C#字典 Dictionary<Tkey,Tvalue> 之线程安全问题 ConcurrentDictionary<Tkey,Tvalue> 多线程字典
    javascript 获取iframe里页面中元素值的方法 关于contentWindow和contentDocumen
    WPF 之 UI 异步交互
    layui 解决从子页面传值回父页面方法
    layui 解决文本框只输入数字方法
    layui 合计出现多位小数的解决方法
    Jquery.Cookie 使用
    Git 上传代码步骤
    2分钟教你如何彻底删除Win10中 Windows.old 文件夹
  • 原文地址:https://www.cnblogs.com/liuyang-520/p/12489515.html
Copyright © 2011-2022 走看看