2020-12-22 关于Vue3中动态组件使用Transiton 动画失效的问题

在Vue3中使用Transition发现动画失效,看看问题的过程:

1、刚开始的写法


刚开始的写法

结果发现动画无效,页面没有过渡效果,经过仔细查看文档,发现在Vue3中需要加一个appear属性,如下:


加上appear属性

这样,过渡动画效果就可以了,另外注意Vue3中和Vue2中关于Router view的动画包裹写法是不一样的,Vue3中,Vue-router最新暴露了一个v-slot的插槽,然后把Transiton组件包裹起来

最后提醒:Vue3的Fragment方式使得组件不再一定要在 一个元素的包裹下,但是如果使用Transition的话,其页面组件还是需要放在一个根标签中才有效,否则是无效的

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容