CODEWITHSUNDEEP
vuejs2
Bas
Bas

Reputation: 2400

Vuejs transition 1 pager for components

I have 1 page with 2 components. Component A has a button, when clicking disalbe A and show component B. If i use transition i am getting this error.

I want a nice fadeout A and fade in B, how can i achieve?

Error:

[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

Upvotes: 1

Views: 455

Answers (1)

willia_am
willia_am

Reputation: 188

Good morning sir,

As the error stated, the <transition> component can be used only with a single child element. You can learn more about that here: https://v2.vuejs.org/v2/guide/transitions.html

You could instead use two <transition> components to handle the fade animation for each one of your elements like so:

<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>

The fade animation will be applied to each div whenever componentb and datatable is visible or not.

Hope that helps you.

Upvotes: 2

Related Questions