Transition on a q-modal



  • 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



  • @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>