Transition Animation

Topic: Transition Animation

imyke priority asked 4 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.

Add comment

Magdalena Dembna staff answered 4 years ago

0 0 Best answer

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

<pre class="prettyprint"><code><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>
</code></pre>

<p>Kind regards,
Magdalena</p>

Please insert min. 20 characters.

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 priority commented 4 years ago

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

Magdalena Dembna staff commented 4 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

Add comment

Write

Create snippet

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: Priority
Premium support: Yes
Technology: MDB Vue
MDB Version: 5.3.0
Device: Laptop
Browser: Firefox
OS: Windows
Provided sample code: Yes
Provided link: No

imyke

71Support score
5Questions 4Answers 0Snippets