May 28, 2025
0
Level 63
Conditional AlpineJS x-transition and x-trap
Hello,
I'm looking for way to activate / deactivate animations.
<div
{{ $attributes->merge(['class' => 'fixed top-0 right-0 xl:left-0 w-full md:w-60 z-50']) }}
x-show="showMenu"
x-trap.noscroll.noautofocus="showMenu"
x-transition:enter="transform ease-out duration-300"
x-transition:enter-start="translate-x-full"
x-transition:enter-end="translate-x-0"
x-transition:leave="transform ease-in duration-300"
x-transition:leave-start="translate-x-0"
x-transition:leave-end="translate-x-full"
>
I'd like that to deactivate x-trap in desktop mode and activate it only in mobile mode.
And some similar things with x-transition.
How to do that ?
Thanks for your help.
V
Please or to participate in this conversation.