Transition effect doesn't work as expected on doc page on any browser on MacOS.

[bobclewell]

See the attached screen video, but unless I'm missing something, the x-transition isn't working as expected on the demo page for that functionality https://alpinejs.dev/directives/transition. It's just hiding and showing without a fade and scale effect.

I've tried this on Firefox, Chrome, and Safari on my M3 Pro, MacBook Pro and it looks the same on every browser. Please assist.

Screen.Recording.2024-05-14.at.3.48.20.PM.mov

[SimoTod]

Do you need to see it in action? That page is probably broken.

Here's a working example: https://codepen.io/SimoTod/pen/GRaJxmb

[bobclewell]

That Codepen link works. Are these docs open sourced? I'd be happy to write a PR to get this page working correctly.

[SimoTod]

not fully. the contents are included in this repo as a list of markdown files but templates, assets and similar are from a private repo that only the maintainer has access to.
I've inspected the element in dev console and the transition properties are applied. You don't notice them because they are fast and, since the element is a span (inline element), it doesn't really move.
You can change it to a div here (https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/directives/transition.md?plain=1#L35) and it should be more obvious.

[bobclewell]

You're right. It works when it's a div. Can I submit a PR or bug report for this somewhere?

[SimoTod]

You can just send the PR and explain in the description that, with a span, the transition effect is not obvious because the element doesn't move so the documentation looks broken. 👍