vue之css过渡<transition></transition>

最新推荐文章于 2023-07-01 14:33:19 发布

MajorMe

最新推荐文章于 2023-07-01 14:33:19 发布

阅读量345

点赞数

分类专栏： vue 文章标签： css过渡 transition

本文链接：https://blog.csdn.net/qmz18778391913/article/details/100016040

版权

vue 专栏收录该内容

13 篇文章 4 订阅

订阅专栏

代码：

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
        <div id="app">
            <input class="myButton" style="background-color:green" v-show="!ifShow" type="button" value="showEnter" @click="ifShow=!ifShow">
            <input class="myButton" v-show="ifShow" type="button" value="showLeave" @click="ifShow=!ifShow"><br/><br/>
           <transition name="qmz">
               <p v-if="ifShow">魏无羡&蓝忘机</p>
           </transition>
        </div>
    </body>
    <script>
        var vm = new Vue({
            el: '#app',
            data(){
                return{
                    ifShow:false
                }
            },
        })
    </script>
    <style>
        
        .qmz-enter {
            color: greenyellow;
            font-size:12px;
        }
        .qmz-enter-to {
            color: plum;
            font-size:16px;
        }
        .qmz-enter-active {
            transition: all 1s ease;
        }

        /* .qmz-leave的样式没有显示，不懂为啥 */
        .qmz-leave {
            color: yellow;
            font-size:12px;
        }
        .qmz-leave-to {
            color: red;
            font-size:12px;
        }
        .qmz-leave-active {
            transition: all 2s ease;
        }
        .myButton{
            padding: 3px 5px;
            border-radius: 4px;
            outline: none;
            border: 1px solid silver;
            background-color: greenyellow
        }
    </style>
</html>

效果：
在这里插入图片描述

MajorMe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue之css过渡<transition></transition>

代码：<!DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta...
复制链接

扫一扫

专栏目录