vue实现多个元素或多个组件之间动画效果

本文实例为大家分享了vue实现多个元素或多个组件之间动画的具体代码，供大家参考，具体内容如下

创新互联是一家以网络技术公司，为中小企业提供网站维护、网站设计制作、成都网站制作、网站备案、服务器租用、申请域名、软件开发、小程序制作等企业互联网相关业务，是一家有着丰富的互联网运营推广经验的科技公司，有着多年的网站建站经验，致力于帮助中小企业在互联网让打出自已的品牌和口碑，让企业在互联网上打开一个面向全国乃至全球的业务窗口：建站欢迎来电：18980820575

多个元素的过渡

　　
　　　　
hello world
　　　　
bye world
　　
　　切换

按照之前的写法方式，渐隐渐出的效果并没有出现该有的效果，那么为什么呢？

在if else两个元素切换的时候，会尽量的复用dom，正是vue，dom的复用，导致动画的效果不会出现，如果想要vue不去复用dom，之前也说过，怎么做呢，给两个div不同的key值就行了

hello world
bye world

这样就可以有个明显的动画效果，多个元素过渡动画的效果。

transition还提供了一个mode属性，in-out是先显示再隐藏，out-in是先隐藏再显示

多个组件的过渡

　　
　　　　
　　　　
　　
　　切换

这个就是多个组件的过渡，采用的是上面的方式，替换子组件，那么我们换一种方式，用动态组件

　　
　　　　
　　
　　切换

这样也实现了多个组件的过渡效果。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。