Vue3之元素和组件的动画切换实现示例详解

更新时间：2023年04月04日 16:31:10 作者：时光剑客

这篇文章主要为大家介绍了Vue3之元素和组件的动画切换实现示例详解,有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

前言

当我们使用某个软件或者网站完成一些交互的时候，会发现做得很好的网站和软件都少不了动画的润色，完成的功能都是从一个界面跳转到另一个界面，但是加动画和不加动画完全是两种不同的体验，而且动画还可以遮住一些缺陷，比如相机预览从16：9切换到4：3时会出现黑边的情况，这时加一个转场动画，用户就不会看到这个黑边了，同样在网站开发中如果说加载的另一个页面网络不太好时，我们可以使用一个加载动画，让用户感觉当前系统仍然正常。不会出现“卡死”的假象，本文我们就一起看下元素和组件之间的切换动画如何实现

实例解析

元素间的动画切换

元素之间的动画切换指的是两个dom元素之间的切换，比如一个div消失，另一个div显示，消失对应着渐出的效果，显示对应渐入的效果，本例我们以两个div，一个显示hello world,另一个显示bye world,然后使用一个按钮控制动画的切换，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素切换动画的实现</title>
    <style>
        .v-enter-from{
            opacity: 0;
        }
        .v-enter-active{
            transition: opacity 1s ease-in;
        }
        .v-enter-to{
            opacity: 1;
        } 
        .v-leave-from{
            opacity: 1;
        }
        .v-leave-active{
            transition:opacity 1s ease-in
        }
        .v-leave-to{
            opacity: 0;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
 const app = Vue.createApp({
        data() {
            return {
               show:false
            }
        },
        methods: {
            handleClick(){
              this.show = !this.show;
            }
        },
        template: 
        `
        <transition mode="out-in" appear>
            <div v-if="show">hello world </div>
            <div v-else="show" >bye world </div>
        </transition>
        <button @click="handleClick">switch</button>
        `
    });
    const vm = app.mount('#root');
</script>

如上面的代码所示，我们使用CSS定义好渐入和渐出的效果，然后将我们要做动画的div放到<transition></transition>标签之间，使用一个Boolean变量show控制元素的显示和隐藏，当我们点击按钮的时候，执行handleClick函数，将show变量取反，达到切换的效果。在代码中我们还看到了在transition标签上使用了一个mode="out-in",这个mode的取值其实还有一个是mode="in-out",两者的区别如下：

mode="out-in": 表示两个元素切换的时候，当前的元素先消失，待显示的元素再显示 mode="in-out"：表示两个元素切换的时候，待显示的元素先显示，当前的元素再消失

读者可以将这两个属性都试试，看下效果，印象会更深

在代码中我们看到有一个属性appear，这个属性的意思是当我们在浏览器中打开界面的时候执行动画，否则页面在加载的时候没有动画

组件间的动画切换

在Vue中我们更多的会使用组件的方式，其实组件之间也是可以做动画切换的实现的，这里我们可以把上面的例子改造下，以动态组件的方式实现下上面元素间切换的动画效果，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件间切换动画的实现</title>
    <style>
        .v-enter-from{
            opacity: 0;
        }
        .v-enter-active{
            transition: opacity 1s ease-in;
        }
        .v-enter-to{
            opacity: 1;
        } 
        .v-leave-from{
            opacity: 1;
        }
        .v-leave-active{
            transition:opacity 1s ease-in
        }
        .v-leave-to{
            opacity: 0;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    // 多个单组件之间的动画
    const ComponentA = {
        template:'<div>hello world</div>'
    }
    const ComponentB = {
        template:'<div>bye world</div>'
    }
 const app = Vue.createApp({
        data() {
            return {
               component:'component-a'
            }
        },
        methods: {
            handleClick(){
               if(this.component === 'component-a'){
                this.component = 'component-b';
               }else{
                this.component = 'component-a';
               }
            }
        },
        components:{
            'component-a':ComponentA,
            'component-b':ComponentB
        },
        // 动态组件的方式
        template: 
        `
        <transition mode="out-in" appear>
            <component :is="component" />
        </transition>
        <button @click="handleClick">switch</button>
        `
    });
    const vm = app.mount('#root');
</script>

前面的章节中我们已经介绍了如何使用动态组件，上面的代码中我们定义了两个组件ComponentA和ComponentB,默认显示ComponentA组件的内容，当点击按钮的时候，使用动画切换到ComponentB,效果和元素间切换的动画一模一样。读者可以下去实践下，这里不多介绍。

总结

本文主要介绍了元素间和组件间动画切换的实现，本文的主要目的是介绍组件间和元素间可以使用动画来切换，至于动画，本文使用的是非常简单的动画，读者若是想实现更复杂炫丽的动画，请自行实现

以上就是Vue3之元素和组件的动画切换实现示例详解的详细内容，更多关于Vue3元素和组件动画切换的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

详解keep-alive组件缓存
keep-alive是Vue中一个非常有用的特性,它可以帮助我们避免重复渲染和减少组件的渲染次数,从而提高应用程序的性能,本文给大家介绍keep-alive组件缓存的相关知识,感兴趣的朋友一起看看吧
2024-01-01
LRU算法在Vue内置组件keep-alive中的使用
LRU算法全称为least recently use 最近最少使用，核心思路是最近被访问的以后被访问的概率会变高，那么可以把之前没被访问的进行删除，维持一个稳定的最大容量值，从而不会导致内存溢出。
2021-05-05
uniapp前端支付篇之微信、抖音、快手、h5四个平台支付功能
支付功能在我们日常开发中经常会遇到,下面这篇文章主要给大家介绍了关于uniapp前端支付篇之微信、抖音、快手、h5四个平台支付功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-03-03
vue3+ts代理的使用
本文主要介绍了vue3+ts代理的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-12-12
Vue中使一个div铺满全屏的实现
最近在项目开发中,就遇到了这个问题,Vue中如何使一个div铺满全屏,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2024-07-07
Vue2.5学习笔记之如何在项目中使用和配置Vue
这篇文章主要介绍了Vue2.5学习笔记之如何在项目中使用和配置Vue的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-09-09
vue登录成功之后的token处理详细步骤
Token是身份验证后服务端返回的令牌,常用于访问授权API和页面权限校验,Token数据可存储在本地或Vuex中,本地存储可实现数据持久化,这篇文章主要介绍了vue登录成功之后的token处理详细步骤,需要的朋友可以参考下
2024-10-10
vue中引用阿里字体图标的方法
这篇文章主要介绍了vue中引用阿里字体图标出现错误问题的解决方法，感兴趣的朋友跟随脚本之家小编一起学习吧
2018-02-02
Vue获取DOM的几种方法总结
这篇文章主要介绍了Vue获取DOM的几种方法总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
解决Electron store的commit和dispatch不好用问题
这篇文章主要介绍了解决Electron store的commit和dispatch不好用问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01