vue的transition标签使用后会跳转的时候闪一下白,不用动画之后直接跳转就不会闪了

Question

想要用transition实现界面跳转的过渡效果，结果有了过渡效果，不过在过渡后界面会闪一下白

Answer 1

因为两个元素过渡的时候，两个页面都被渲染出来了，new按照文档流布局在old的下方，old过渡结束，隐藏，new的布局从old下方一下子飞到顶部，造成闪烁。
解决办法：需要过渡的元素使用position:absolute;重叠在一起

Answer 2

Answer 3

如果会闪烁 在transition 外面包一层div 然后使用v-cloak css 加入 [v-cloak] {
display: none !important;
}