Vuejs переход 1 пейджер для компонентов

Question

У меня 1 страница с 2 компонентами. Компонент A имеет кнопку, при нажатии отключить A и показать компонент B. Если я использую переход, я получаю эту ошибку.

Я хочу хорошего затухания А и затухания В, как я могу достичь?

Ошибка:

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

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

Answer 1

Доброе утро, сэр,

Как указано в сообщении об ошибке, компонент <transition> может использоваться только с одним дочерним элементом.Вы можете узнать больше об этом здесь: https://vuejs.org/v2/guide/transitions.html

Вместо этого вы можете использовать two <transition> компоненты для обработки анимации затухания для каждого из ваших элементов, например:

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

Fadeанимация будет применяться к каждому элементу div каждый раз, когда componentb и datatable видимы или нет.

Надеюсь, что это поможет вам.