I want to have dark background with 50% opacity when user opens navbar in mobile.
My issue is that I can't make the transition to stop at 50% and have 50% opacity. When transition ends it applies 100% opacity. It happens when I don't write
bg-gray-800 opacity-50 in
button tag. When I write it behaves differently - it doesn't make any transition.
<button class="fixed z-0 bottom-0 top-0 left-0 right-0 h-full w-full cursor-default bg-gray-800 opacity-50" x-show="open"
x-transition:enter="transition-opacity ease-in-out duration-700"
x-transition:leave="transition-opacity ease-in-out duration-700"