Topic: Transition Animation
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.
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 commented 6 years ago
Thank you. This is a completely different strategy from what I was thinking.
Magdalena Dembna staff premium commented 6 years ago
I hope you've managed to achieve the desired effect. Good luck with your project. Kind regards, Magdalena
laniakea commented 6 years ago
Magdalena, that solution didn't works for mdb-card-body
Magdalena Dembna staff premium commented 6 years ago
@laniakea please post a code snippet. Kind regards, Magdalena
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: 5.3.0
- Device: Laptop
- Browser: Firefox
- OS: Windows
- Provided sample code: No
- Provided link: No