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元素和组件动画切换的资料请关注我们其它相关文章!