Update transition documentation for vue3

[karltbone]

Hello,

https://vue-final-modal.org/guide/properties#transition

In vue3, the names of the transition classes have changed. May be good to have an example for vue3.

Current doc (Show example transition Object):

:transition="{
      'enter-active-class': 'transition duration-200 ease-in-out transform',
      'enter-class': 'translate-y-full',
      'enter-to-class': 'translate-y-0',
      'leave-active-class': 'transition duration-200 ease-in-out transform',
      'leave-to-class': 'translate-y-full',
      'leave-class': 'translate-y-0'
    }"

What I found to work in vue3:

:transition="{
      'enter-active-class': 'transition duration-200 ease-in-out transform',
      'enter-from-class': 'translate-y-full',
      'enter-to-class': 'translate-y-0',
      'leave-active-class': 'transition duration-200 ease-in-out transform',
      'leave-to-class': 'translate-y-full',
      'leave-from-class': 'translate-y-0'
    }"

Thank you

[db-conception]

'enter-active-class': 'transition duration-200 ease-in-out transform', 'enter-from-class': 'translate-y-full', 'enter-to-class': 'translate-y-0', 'leave-active-class': 'transition duration-200 ease-in-out transform', 'leave-to-class': 'translate-y-full', 'leave-from-class': 'translate-y-0'

Hello It doesn't work at me. Did you change anything else ? The modal should translate from top exact ?

[db-conception]

Hello,

https://vue-final-modal.org/guide/properties#transition

In vue3, the names of the transition classes have changed. May be good to have an example for vue3.

Current doc (Show example transition Object):

:transition="{
      'enter-active-class': 'transition duration-200 ease-in-out transform',
      'enter-class': 'translate-y-full',
      'enter-to-class': 'translate-y-0',
      'leave-active-class': 'transition duration-200 ease-in-out transform',
      'leave-to-class': 'translate-y-full',
      'leave-class': 'translate-y-0'
    }"

What I found to work in vue3:

:transition="{
      'enter-active-class': 'transition duration-200 ease-in-out transform',
      'enter-from-class': 'translate-y-full',
      'enter-to-class': 'translate-y-0',
      'leave-active-class': 'transition duration-200 ease-in-out transform',
      'leave-to-class': 'translate-y-full',
      'leave-from-class': 'translate-y-0'
    }"

Thank you

Did you add css ?

[db-conception]

Ok sorry I am a begginer. I don't use tailwinds css, so your class wasn't working at me .

Its works at me with

<vue-final-modal
...
        :transition="modalTransition"
        :hide-overlay="true"
    ></vue-final-modal>

const modalTransition = {
            'enter-active-class': 'hunaa-menu-enter-active',
            'enter-from-class': 'hunaa-menu-y-0',
            'enter-to-class': 'hunaa-menu-full',
            'leave-active-class': 'hunaa-menu-leave-active',
            'leave-to-class': 'hunaa-menu-y-0',
            'leave-from-class': 'hunaa-menu-full'
        };

.hunaa-menu-enter-active,
.hunaa-menu-leave-active {
  transition: transform 0.4s ease-in-out;
}
.hunaa-menu-full{
    transform: translateY(0);
}
.hunaa-menu-y-0{
    transform: translateY(-100vh);
}

[hunterliu1003]

Thanks! The documentation was updated.

[gsabater]

I'm here to say that i haven't seen anything regarding transitions in the documentation (at least at the website), and the comment @db-conception worked perfectly for me.

I think that the website should display an example of it.