Hello,

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 }"
          v-show="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"/>
        <div>
            <mdb-card-title class="font-weight-bold mb-2">Title...</mdb-card-title>
            <mdb-card-text>
                <mdb-icon far icon="clock" class="pr-2"/>
                07/24/2018
            </mdb-card-text>
        </div>
    </mdb-card-body>
    <mdb-card-body class="pb-2">
        <mdb-card-text>
            My text...
        </mdb-card-text>
    </mdb-card-body>
</mdb-card>

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,

Timo