Vue3之元素和组件的动画如何切换

本篇内容介绍了“Vue3之元素和组件的动画如何切换”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

实例解析

元素间的动画切换

元素之间的动画切换指的是两个

dom

元素之间的切换，比如一个

div

消失，另一个

div

显示，消失对应着渐出的效果，显示对应渐入的效果，本例我们以两个

div

，一个显示

hello world

,另一个显示

bye world

,然后使用一个按钮控制动画的切换，代码如下：

元素切换动画的实现.v-enter-from{opacity:0;}.v-enter-active{transition:opacity1sease-in;}.v-enter-to{opacity:1;}.v-leave-from{opacity:1;}.v-leave-active{transition:opacity1sease-in}.v-leave-to{opacity:0;}

如上面的代码所示，我们使用CSS定义好渐入和渐出的效果，然后将我们要做动画的

div

放到



标签之间，使用一个

Boolean

变量

show

控制元素的显示和隐藏，当我们点击按钮的时候，执行

活动：慈云数据爆款香港服务器，CTG+CN2高速带宽、快速稳定、平均延迟10+ms 速度快，免备案，每月仅需19元！！ 点击查看 handleClick

函数，将

show

变量取反，达到切换的效果。 在代码中我们还看到了在transition标签上使用了一个

mode=\"out-in\"

,这个

mode

的取值其实还有一个是

mode=\"in-out\"

,两者的区别如下：


mode=\"out-in\"

: 表示两个元素切换的时候，当前的元素先消失，待显示的元素再显示

mode=\"in-out\"

：表示两个元素切换的时候，待显示的元素先显示，当前的元素再消失

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

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

组件间的动画切换

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

组件间切换动画的实现.v-enter-from{opacity:0;}.v-enter-active{transition:opacity1sease-in;}.v-enter-to{opacity:1;}.v-leave-from{opacity:1;}.v-leave-active{transition:opacity1sease-in}.v-leave-to{opacity:0;}

“Vue3之元素和组件的动画如何切换”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注服务器测评网网站，小编将为大家输出更多高质量的实用文章！