transition not working when I open sidebar

[stackerito]

I have a sidebar that opens and closes with a transition. But the transition only works when I close it, not when I open it:
https://codepen.io/Stackerito/pen/dyWmdgY

*Edit: I noticed the transition for enter does work, but not all the time.. so it's even more confusing now

Why?

[KevinBatdorf]

I think you want to use either the class bindings OR the transition directives (with x-show), but not both. For example, if you want to just move the sidebar, you can do this:

<aside class="transition-all ease-out duration-300 transform ..." :class="{'-translate-x-full': !open}">

For the x-transition + x-show approach you just need to check the docs some more, there are multiple steps in the animation where you apply classes. Probably some good demos via Google searching too. The syntax is the same for Alpine V2 and V3