Topic: Transition Animation

imyke free asked 5 years ago


I hope you forgive this question.

I have an mdb-card containing dynamically generated content. With a next button, I can switch to the 'next' content of the payload array. I would like a way to animate from card to card (a little like powerpoint, if you may).

Here's what I've tried: On clicking the button, a dynamic data value is changed to animated fadeout slower which is also referenced in my card's v-bind:class attribute. Needless to say, the result is not what I intended.

Could you help with this? I will be very grateful.


Magdalena Dembna staff answered 5 years ago


Hi, Animation classes like animated fadeIn trigger an effect only when the element is mounted - I can suggest to approaches - one is to use v-show directive as in the simple example shown below. Another is to use vue transition wrapper.

<template>
  <div>
    <mdb-card v-show="show" class="animated fadeIn card">
      <mdb-card-image src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%286%29.jpg" alt="Card image cap"></mdb-card-image>
      <mdb-card-body>
        <mdb-card-title>Basic card</mdb-card-title>
        <mdb-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</mdb-card-text>
        <mdb-btn color="primary" @click="onClick">Change card</mdb-btn>
      </mdb-card-body>
    </mdb-card>
    <mdb-card v-show="!show" class="animated fadeIn card">
      <mdb-card-image src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap"></mdb-card-image>
      <mdb-card-body>
        <mdb-card-title>Basic card</mdb-card-title>
        <mdb-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</mdb-card-text>
        <mdb-btn color="primary" @click="onClick">Change card</mdb-btn>
      </mdb-card-body>
    </mdb-card>
  </div>
</template>
<script>
    import { mdbCard, mdbCardImage, mdbCardBody, mdbCardTitle, mdbCardText, mdbBtn } from 'mdbvue';
    export default {
        name: 'HelloWorld',
        components: {
            mdbCard,
            mdbCardImage,
            mdbCardBody,
            mdbCardTitle,
            mdbCardText,
            mdbBtn
        },
    data() {
      return {
        show: true
      };
    },
    methods: {
      onClick(){
        this.show = !this.show
      }
    }
    }
</script>
<style>
  .card {
    width: 400px;
    margin: auto;
  }
</style>

Kind regards, Magdalena


imyke free commented 5 years ago

Thank you. This is a completely different strategy from what I was thinking.


Magdalena Dembna staff commented 5 years ago

I hope you've managed to achieve the desired effect. Good luck with your project. Kind regards, Magdalena


laniakea free commented 4 years ago

Magdalena, that solution didn't works for mdb-card-body


Magdalena Dembna staff commented 4 years ago

@laniakea please post a code snippet. Kind regards, Magdalena



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 5.3.0
  • Device: Laptop
  • Browser: Firefox
  • OS: Windows
  • Provided sample code: Yes
  • Provided link: No