easy fadeIn and fadeOut ?

[fab-kaz]

Hello folks,

Newbie inside ! sorry if my question seems trivial.

When i used jquery, i used to write fadeIn and fadeOut to make a message appear and disappear smoothly.
I try to do the same thing with alpinejs with no succes. I guess i missed something with x-transitions
The message appears and disappear suddendly.

<div x-data="{ message: 'blablabla', showMessage: true }" x-init="setTimeout(() => { showMessage = false }, 5000)">
  <div 
    x-show="showMessage"
    x-text="message"
    x-transition:enter="transition-opacity duration-1000 ease-in"
    x-transition:leave="transition-opacity duration-1000 ease-out"
  ></div>
</div>

Thank you for any advice ;)
regards,
f.

[ekwoka]

You can just do x-transition.opacity and then you'll get that

or to get the duration do x-transition.opacity.duration.1000ms

https://alpinejs.dev/directives/transition#customizing-opacity

In terms of why what you're doing there doesn't work is that you never actually give it a class that does the opacity change. That's just tailwindbtw, are you sure you're even using that?