[JavaScript知识库] 5.vue当中添加过渡和动画

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 5.vue当中添加过渡和动画 -> 正文阅读

[JavaScript知识库]5.vue当中添加过渡和动画

官方文档

    <style>
        .a {
            width: 100px;
            height: 100px;
            background-color: springgreen;
        }


        .slide-leave {
            height: 100px;
            opacity: 1;
            background-color: springgreen;
        }

        .slide-leave-to {
            height: 0;
            opacity: 0;
            background-color: hotpink;
        }

        .slide-leave-active {
            transition: all 5s;
        }

        .slide-enter {
            height: 0;
            opacity: 0;
            background-color: hotpink;
        }

        .slide-enter-to {
            height: 100px;
            opacity: 1;
            background-color: springgreen;
        }

        .slide-enter-active {
            transition: all 5s;
        }
    </style>


<body>
    <div id="app">
        <!-- 设置进入效果， 要在外层包裹一个 transition -->
        <transition name="slide">
            <div class="a" v-show="isShow"></div>
        </transition>

        <button @click="isShow=!isShow">点击切换</button>

    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                isShow: true,
            },
        })
    </script>
</body>