Transitions and floating ui in anchor plugin

[awcodes]

There appears to be a bug in either the transition api or the computePosition() method in floating ui. Haven’t been able to track it down fully.

When using transitions with the anchor plugin the initial left (x) position is off by approximately 30 pixels.

Would be helpful to know if this is an issue in alpine or floating ui.

[ekwoka]

Can you make a demo?

[awcodes]

seems like registration is closed on that link.

[ekwoka]

sorry, gave wrong url lol /play is a sandbox

[awcodes]

Reproducible code

<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/anchor@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

<div x-data="{open: false}">
    <button 
        type="button" 
        class="bg-gray-700 text-white py-3 px-4 rounded-md hover:bg-lime-600" 
        @click="open = !open"
        x-ref="trigger"
    >Trigger</Button>

    <div 
        x-show="open" 
        x-anchor.bottom="$refs.trigger" 
        style="display: none;" 
        class="z-10 bg-gray-800 text-white p-2 rounded-md overflow-auto"
        x-transition:enter="ease duration-500"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="ease duration-500"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
    >
        <ul>
            <li><button>Button 1</button></li>
            <li><button>Button 2</button></li>
            <li><button>Button 3</button></li>
        </ul>
    </div>
</div>

With transitions:
https://github.com/alpinejs/alpine/assets/3596800/73a2245e-7226-4b3e-9b85-b44e29d684c8

Without transitions:
https://github.com/alpinejs/alpine/assets/3596800/488d0e38-7995-49f1-b211-1993ced5c559

[SimoTod]

@awcodes it's not exactly a bug but more of an unexpected outcome of the interaction between all the various functionalities.

In reality, it behaves correctly although you probably weren't expecting that:

• x-show applies display: none to the div so the div is considered by your browser as having width = 0px.
• x-anchor.bottom anchors the div to the middle of the bottom border.
• x-transition applies the duration-500 class to the div when it becomes visible.
• duration-500 in tailwind translates to transition-duration: 500ms; which means that all CSS properties are animated.

So what happens is, when the anchored div is hidden (width = 0), the horizontal offset is exactly half of the container width. Once the div become visible, the horizontal offset is changed to 5 but because of the css rules, it will transition the offset along with the opacity.

Your options are:

• use x-anchor.bottom-start so the horizontal offset is always 5
• use transition-opacity inside x-transition:enter (and probably x-transition: leave for consistency) so tailwind only animates the opacity

Here you can see some examples: https://codepen.io/SimoTod/pen/wvZdPpR?editors=1111

I hope it makes sense.

[awcodes]

That makes sense. Thank you for your research and reply. Was just struggling to figure out where the problem might possibly be.