Vue Transition组件加mode=“out-in“会导致页面空白？

 <div>
        <Transition name="slide-fade" mode="out-in">
            <keep-alive>
                <component :is="activeTab == 0 ? component1 : component2"></component>
            </keep-alive>
        </Transition>
    </div>

        这是我使用动画组件的方式，我记得之前写的时候好好的，现在用户说页面是空白的，排查了一下发现是mode="out-in"这个属性导致的，所以这是为什么呢？我们不妨再看看文档：

<Transition>仅支持单个元素或组件作为其插槽内容。如果内容是一个组件，这个组件必须仅有—个根元素。

        文档说了，子组件必须只有一个根元素，我查了子组件，发现两个子组件都用了一个div包裹，没错啊！！！

        正在我焦头烂额之际，注意到其中一个组件的div上方，有一段注释？

<template>
     <!-- XXXXX选项子页面 -->
     <div>
        一些内容
     </div>
</template>

         好家伙，破案了，原来是这个注释也算是根元素，这样的话子组件就算有2个根元素，所以会导致页面空白，把注释去掉即可！！！

        这个注释是其他同事写放上去的，所以大家记得跟身边同事也分享一下这个bug，避免大家合作时给对方制造不必要的bug，浪费时间排查。