Question

我有1页有2个组件。当点击disalbe A并显示组件B时，组件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>

当componentb和datatable可见或不可见时，淡入淡出动画将应用于每个div。

希望对你有所帮助。

Vuejs为组件过渡1个寻呼机

1 个答案: