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

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

双元素交替切换效果制作

新建一个Demo44.html文件,复制前面我们写过的基础代码,然后在文件中加入一个新的<div>,修改div里边的文字。再用v-ifv-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>

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

双DOM元素动画的实现

增加动画效果

现在用学过的知识,为这两个<div>增加基本的动画CSS效果。为了方便,我们就写一个透明度过渡就好。实现这个效果,都是我们学过的知识了,你可以跟着写,也可以先不看下面的文章,自己先写写看。练习一下。

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

<style>
    .v-enter-from{
        opacity: 0;
    }
    .v-enter-to {
        opacity: 1;
    }
    .v-enter-active{
        transition: opacity 2s ease-in;
    }
</style>

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

<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>

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

增加动画效果

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>
`

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

刚进入页面时也带有了动画效果

为了方便大家学习,附上全部源码:

<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元素动画切换效果,学习两个组件之间的切换也变的容易了。下一节我们学习一下组件的切换。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 44. [动画]vue3双DOM元素动画的实现

发表评论

提供最优质的资源集合

立即查看 了解详情