Vuejs2 用于组件的Vuejs transition 1寻呼机

我有2个组件的1页。组件A有一个按钮，当单击解除A并显示组件B时。 如果使用transition，则会出现此错误

我想要一个好的淡出a和淡入B，我如何才能实现

错误：

[Vue warn]: <transition> can only be used on a single element. Use <transition-group> for lists.

[Vue warn]：只能在单个元素上使用。用于列表。

App.js

<transition name="fade">
   <div class="fade-enter-active" v-show="datatable">
      <component-a :title="'AAA'"></component-a>
        <button v-on:click="showCompB">Show B and disable A</button> 
    </div>
    <div class="fade-enter-active" v-show="componentb">
        <component-b :title="'BBB'"></component-b>
    </div>
</transition>


export default {
    data() {
        return {
            datatable: true,
            componentb: false,
            etc etc

显示B并禁用A
导出默认值{
数据（）{
返回{
数据表：对，
成分B：假，
等等

早上好，先生

如错误所述，

组件只能与单个子元素一起使用。您可以在此处了解更多信息：

您可以改为使用两个组件来处理每个元素的淡入淡出动画，如下所示：

显示B并禁用A

只要

componentb

和

datatable

可见或不可见，淡入淡出动画将应用于每个div

---

希望这能对你有所帮助。

很好，人们投了反对票，但没有说明原因，pfffff