Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

vincent15000's avatar

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

0 likes
0 replies

Please or to participate in this conversation.