x-show and transitions

[ZayRTun]

What I am trying to achieve here is to animate sidebars. Let's say there are two divs side by side (siblings), the left div can be toggled and the right main div is shown at all times. Now when I apply transitions (slide in and out) to left div while toggling works perfectly but the main div that sits right to the sidebar jumps while toggling the sidebar.

How do I transition the main div along with the sidebar?
I have gone through the docs and found "x-if" but that can only be used within template tag. And when I use it within the template tag all the elements within are not detected by javascript anymore.

Please help I am really new at this.

[KevinBatdorf]

Can you share the example where it's jumping? Probably easier to just identify why that's happening first.

[ZayRTun]

Sorry, by jumping I mean to say it's abrupt and thats because I haven't applied the transitions yet.
How do I apply transition without using x-show or x-if

[KevinBatdorf]

You can bind classes, like this:

<div x-data>
  <div :class="{ '-translate-x-full' : someCondition }"></div>
</div>

[ZayRTun]

My blade file is written as follows:

<main x-data="{sideBar: false}" class="flex flex-col min-h-screen h-screen">
        <header>
            <nav class="bg-primary px-3 py-2 relative">
                <div class="flex space-x-3">
                    <button>
                        <svg x-on:click="sideBar = ! sideBar" class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                        </svg>
                    </button>

                    <x-algolia.searchbox></x-algolia.searchbox>

                    <button>
                        <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
                        </svg>
                    </button>
                </div>
            </nav>
        </header>


        <main class="flex-1 flex w-full relative overflow-y-auto">
            <aside
                   x-show="sideBar"
                   x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700"
                   x-transition:enter-start="-translate-x-full"
                   x-transition:enter-end="translate-x-0"
                   x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700"
                   x-transition:leave-start="translate-x-0"
                   x-transition:leave-end="-translate-x-full"
                   class="absolute md:static h-full bg-gray-900 w-64 bg-opacity-50">
                <h1>SideBar</h1>
            </aside>

            <section class="flex-1 overflow-y-auto transition duration-75 ease-in-out">
                {{ $slot }}
            </section>
        </main>
    </main>

[ZayRTun]

Okay my bad, I got it working the way I wanted.
I just switched from using "translate-x" to "margin" and so it works

[inamcbs]

i have same problem,can you share exact code of margin you have used.

[ZayRTun]

I just took the width of the wrapper and went negative on the same width.

 <main class="flex-1 flex w-full relative overflow-y-auto">
    <aside
           x-show="sideBar"
           x-cloak
           x-transition:enter="transition-all ease-in-out duration-500 sm:duration-700"
           x-transition:enter-start="-ml-64"
           x-transition:enter-end="ml-0"
           x-transition:leave="transition-all ease-in-out duration-500 sm:duration-700"
           x-transition:leave-start="ml-0"
           x-transition:leave-end="-ml-64"
           class="absolute md:static h-full bg-white w-64 border-r">
        <section class="px-3">
            {{ $sidebarContent }}
        </section>
    </aside>
</main>