FadeOut card and hide it

web
mobile

Topic: FadeOut card and hide it

iparker pro asked 2 months ago

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


Mikołaj Smoleński staff answered 2 months ago

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

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

Best regards


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Vue
  • MDB Version: 6.2.0
  • Device: x
  • Browser: x
  • OS: x
  • Provided sample code: No
  • Provided link: No