vue-例7-4多元素过渡3.html

虾米大王

于 2023-05-06 08:48:44 发布

阅读量17

点赞数

分类专栏： Vue 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/modern358/article/details/129976968

版权

Vue 专栏收录该内容

661 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多元素过渡</title>
    <style type="text/css">
        .fade-enter,.fade-leave-to{
            opacity: 0;
        }
        .fade-enter-active,.fade-leave-active{
            transition: opacity .5s;
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click="isEditing = !isEditing">切换</button>
        <transition name="fade">
            <button v-if="isEditing" key="save">保存</button>
            <button v-else key="edit">编辑</button>
        </transition>
    </div>

    <script src="../js/vue.js"></script>

    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                isEditing:true,
            }
        });
    </script>
</body>
</html>