Transition trouble using Laravel, VueJS & Tailwind

[anthonyhexium]

Hi,

I am trying to make a notification component and I can't understrand why the component is not having a transition on render.

Transition

<transition
        enter-active-class="transform ease-out duration-500 transition"
        leave-active-class="transition ease-in duration-500"
        enter-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
        enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
        leave-class="opacity-100"
        leave-to-class="opacity-0"
>

Blade

@if (session('status'))
      <notification
          title="Success"
          content="{{ session('status') }}"
      >
      </notification>
@endif

I made a short video if it can help : https://streamable.com/ou593o

Thanks guys !

[ARNHOE]

Hi @anthonywebdev,

For the transitions to work on the initial render, you need to use appear. https://vuejs.org/v2/guide/transitions.html#Transitions-on-Initial-Render

<transition
        appear
        appear-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
        appear-to-class="translate-y-0 opacity-100 sm:translate-x-0"
        appear-active-class="transform ease-out duration-1000 transition"
        leave-active-class="transition ease-in duration-500"
        leave-class="opacity-100"
        leave-to-class="opacity-0"
>

[anthonyhexium]

Hello @ARNHOE,

Thanks for your answer. I have already tried this solution yesterday. Tried again after your message.
Here is the result : https://streamable.com/h5agpv
I don't see any difference in the behavior of the notification compared to the first one. Do you ?

Thanks for the help.

[anthonyhexium]

Ok I found my problem. Thanks to @RomainLanz !

My problem was due to the SSR I am doing.

Solved it by doing :

    async mounted() {
        await setTimeout(() => {
            this.show = true
        }, 500);

        await setTimeout(() => {
            this.show = false
        }, 3000);
    }