Topic: FadeOut card and hide it

iparker free asked 4 years ago


what is the best way to hide a card with a fade-out effect?

I tried following code:

<mdb-card class="promoting-card mb-4"
          v-touch:swipe.left="accept" v-touch:swipe.right="cancel"
          v-bind:class="{ 'bg-success': accepted, 'bg-danger': canceled, 'animated fadeOut': !show }"
    <mdb-card-body class="d-flex flex-row pb-0">
        <img src="../assets/logo_rund.svg" class="rounded-circle mr-3"
             height="50px" width="50px" alt="avatar"/>
            <mdb-card-title class="font-weight-bold mb-2">Title...</mdb-card-title>
                <mdb-icon far icon="clock" class="pr-2"/>
    <mdb-card-body class="pb-2">
            My text...

But with the v-show="show" the card hides directly without the fade-out animation.

Without the v-show I see the fade-out-effect but the hidden card still blocks the place.

So what is the right/best way to solve it? Hope you understand and can help me with this.

Best regards,


Mikołaj Smoleński staff answered 4 years ago

To build custom fadeIn/fadeOut animations we strongly recommend using Vue build-in transitions. Here's the guide:

Please read it carefully and let us know if You have any problems with that issue.

Best regards

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 6.2.0
  • Device: x
  • Browser: x
  • OS: x
  • Provided sample code: No
  • Provided link: No