文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-05-14 12:01

关注

前言

当我们使用某个软件或者网站完成一些交互的时候,会发现做得很好的网站和软件都少不了动画的润色,完成的功能都是从一个界面跳转到另一个界面,但是加动画和不加动画完全是两种不同的体验,而且动画还可以遮住一些缺陷,比如相机预览从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>

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

总结

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

以上就是Vue3之元素和组件的动画切换实现示例详解的详细内容,更多关于Vue3元素和组件动画切换的资料请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯