title: Stopping transition in 50% opacity in Alpine js transitions
body: <p>I want to have dark background with 50% opacity when user opens navbar in mobile.</p>
  <p>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 <code>bg-gray-800 opacity-50</code> in <code>button</code> tag. When I write it behaves differently - it doesn't make any transition.</p>
  <p>My code:</p>
  <pre><code>    &lt;button class=&quot;fixed z-0 bottom-0 top-0 left-0 right-0 h-full w-full cursor-default bg-gray-800 opacity-50&quot; x-show=&quot;open&quot;
                 x-transition:enter=&quot;transition-opacity ease-in-out duration-700&quot;
                 x-transition:enter-start=&quot;opacity-0 bg-transparent&quot;
                 x-transition:enter-end=&quot;opacity-50 bg-gray-800&quot;
                 x-transition:leave=&quot;transition-opacity ease-in-out duration-700&quot;
                 x-transition:leave-start=&quot;opacity-50 bg-gray-800&quot;
                 x-transition:leave-end=&quot;opacity-0 bg-transparent&quot;
                 &gt;
      &lt;/button&gt;
  </code></pre>