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

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

Log in to reply