Transition on a q-modal

[Evan]

Hello, I can’t figure out how make a transition work on a centered minimized q-modal.
When it appears, I’d like fadeInUp to happen and fadeOutDown when it closes.
Could someone please provide an example? Thank you

[i5dr0id]

@evan first you need to register the transition in quasar.conf.js like this

animations: [ 'fadeInUp', 'fadeOutDown']

then for your modal component do this

<q-modal
enter-class='animated fadeInUp'
leave-class='animated fadeOutDown'
minimized
v-model="opened">
 <h4>Basic Modal</h4>
 <q-btn color="primary" @click="openModalCart = false" label="Close" />
 </q-modal>