44. [动画]vue3双DOM元素动画的实现

作者：文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/197009.html

双元素交替切换效果制作
增加动画效果
mode 模式讲解

本文学习的内容是双 DOM 元素的动画切换，意思就是一个动画<transtion>标签里有两个 DOM，然后一个出现时，另一个消失。

双元素交替切换效果制作

新建一个Demo44.html文件，复制前面我们写过的基础代码，然后在文件中加入一个新的<div>，修改 div 里边的文字。再用v-if和v-else控制显示和隐藏。这样就实现了双元素切换的效果。

下面是当前的代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mybj</title>
    <style>


    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    const app = Vue.createApp({
        data(){
            return {
                isShow:false
            }
        },
        methods:{
            hanldClick(){
                this.isShow = ! this.isShow
            }
        },
        template: `  
        <transition>
            <div v-if="isShow">小红进入了试衣间</div>
            <div v-else>小丽进入了试衣间</div>
        </transition>
        <button @click="hanldClick">切换动画</button>
        `
    })
    const vm = app.mount("#app")
</script>

这时在浏览器中打开页面，进行预览。可以看到已经有了基本的切换效果，只不过没有动画。

44. [动画]vue3双DOM元素动画的实现 1

为了方便大家学习，附上全部源码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mybj</title>
    <style>
        .v-enter-from,
        .v-leave-to {
            opacity: 0;
        }
    
        .v-enter-to,
        .v-leave-from {
            opacity: 1;
        }
    
        .v-enter-active,
        .v-leave-active {
            transition: opacity 2s ease-in;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    const app = Vue.createApp({
        data(){
            return {
                isShow:false
            }
        },
        methods:{
            hanldClick(){
                this.isShow = ! this.isShow
            }
        },
        template: `  
        <transition node="out-in" appear>
            <div v-if="isShow">小红进入了试衣间</div>
            <div v-else>小丽进入了试衣间</div>
        </transition>
        <button @click="hanldClick">切换动画</button>
        `
    })
    const vm = app.mount("#app")
</script>

讲到这里两个 DOM 元素直接的动画切换效果你就会使用了。会了两个 DOM 元素动画切换效果，学习两个组件之间的切换也变的容易了。下一节我们学习一下组件的切换。

更多建站教程请访问 https://www.mimiwuqi.com/webqianduan/