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是先隐藏再显示

多个组件的过渡


                  

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


             

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

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


新闻标题:vue实现多个元素或多个组件之间动画效果
分享网址:http://hxwzsj.com/article/jdhdhe.html

其他资讯

Copyright © 2025 青羊区翔捷宏鑫字牌设计制作工作室(个体工商户) All Rights Reserved 蜀ICP备2025123194号-14
友情链接: 重庆网站设计 成都网站建设 网站设计 网站建设 营销网站建设 阿坝网站设计 网站建设开发 成都网站制作 成都网站建设 成都网站建设公司 商城网站建设 成都网站设计 教育网站设计方案 H5网站制作 成都企业网站建设公司 宜宾网站设计 网站设计 高端网站设计 网站制作公司 成都定制网站建设 成都网站建设公司 网站制作