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实现多个元素或多个组件之间动画效果
URL网址:http://bzwzjz.com/article/jdhdhe.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 品牌网站建设 定制级高端网站建设 营销型网站建设 成都网站制作 成都响应式网站建设 网站设计公司 成都网站制作 网站设计制作报价 公司网站建设 阿坝网站设计 品牌网站建设 成都网站设计 移动网站建设 企业网站制作 外贸网站设计方案 成都品牌网站建设 网站制作公司 成都网站建设 成都网站制作 成都营销网站制作 企业网站设计 成都网站制作