44 Vue动画＜transtion＞标签里有两个DOM，然后一个出现时，另一个消失

妖狐艹你老母 2023-10-06 20:43 2阅读 0赞

#### \[动画\] vue3双DOM元素动画的实现 ####

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

## 阐述 ##

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

## 双元素交替切换效果制作 ##

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>demo</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>
    </html>

![在这里插入图片描述][c27b87a8abbb41dea2508a4ab1254078.gif_pic_center]

## 增加动画效果 ##

现在用学过的知识，为这两个`<div>`增加基本的动画CSS效果。

为了方便，我们就写一个透明度过渡就好。实现这个效果，都是我们学过的知识了，你可以跟着写，也可以先不看下面的文章，自己先写写看。练习一下。

你可以先写进入时的过渡样式。

有了进场的过多效果，直接加入出场的选择器就可以实现同时拥有入场和出场动画了。

这时再到浏览器中查看效果，虽然都有了动画。但这时候的动画时同时发生的，并不是我们想要的效果。

![在这里插入图片描述][108a7017e96e4137bfb561c91ce4b290.gif_pic_center]

## mode 模式讲解 ##

为了解决这个问题，可以在模板中 `<transition>` 标签上加入 `mode` 属性。`mode` 属性专门用来控制是先显示离场和入场动画的顺序的。

比如现在想让离场动画先显示，然后再显示入场动画。就可以使用 `mode="out-in"`。

template: `  
        <transition mode="out-in">
            <div v-if="isShow">小红进入了试衣间</div>
            <div v-else>小丽进入了试衣间</div>
        </transition>
        <button @click="hanldClick">切换动画</button>
    `

当然你也可以用 `mode="in-out"` 先显示入场动画，再显示出场动画。只不过这并不是我们想要的方式。

但这时候还是有一个小问题的，就是刚进入页面时，显示的DOM元素（小丽进入了试衣间）是没有动画效果的。如果想让进入页面，开始就产生动画效果，可以在 `<transition>` 标签上加上 `appear` 属性就可以实现。

`appear` 属性的意思是初次对某一个元素进行默认显示的时候也进行动画显示。

template: `  
        <transition mode="out-in" appear>
            <div v-if="isShow">小红进入了试衣间</div>
            <div v-else>小丽进入了试衣间</div>
        </transition>
        <button @click="hanldClick">切换动画</button>
    `

这时候在浏览器中预览，刚进入页面时也带有了动画效果。

![在这里插入图片描述][e2d396aa407d44c1a243b441736cecd4.gif_pic_center]

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>demo</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 mode="out-in" appear>
                    <div v-if="isShow">小红进入了试衣间</div>
                    <div v-else>小丽进入了试衣间</div>
                </transition>
                <button @click="hanldClick">切换动画</button>
            `
        })
        const vm = app.mount("#app")
    </script>
    </html>

[c27b87a8abbb41dea2508a4ab1254078.gif_pic_center]: https://img-blog.csdnimg.cn/c27b87a8abbb41dea2508a4ab1254078.gif#pic_center
[108a7017e96e4137bfb561c91ce4b290.gif_pic_center]: https://img-blog.csdnimg.cn/108a7017e96e4137bfb561c91ce4b290.gif#pic_center
[e2d396aa407d44c1a243b441736cecd4.gif_pic_center]: https://img-blog.csdnimg.cn/e2d396aa407d44c1a243b441736cecd4.gif#pic_center