在 Alpine js 过渡中以 50% 的不透明度停止过渡

Posted 2023-03-07

【中文标题】在 Alpine js 过渡中以 50% 的不透明度停止过渡

【英文标题】：Stopping transition in 50% opacity in Alpine js transitions

【发布时间】：2021-04-17 14:46:51

【问题描述】：

当用户在移动设备中打开导航栏时，我希望具有 50% 不透明度的深色背景。

我的问题是我无法将过渡停止在 50% 并具有 50% 的不透明度。当过渡结束时，它会应用 100% 的不透明度。当我不在button 标签中写bg-gray-800 opacity-50 时，就会发生这种情况。当我编写它时，它的行为有所不同 - 它不会进行任何转换。

我的代码：

    <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:enter-start="opacity-0 bg-transparent"
               x-transition:enter-end="opacity-50 bg-gray-800"
               x-transition:leave="transition-opacity ease-in-out duration-700"
               x-transition:leave-start="opacity-50 bg-gray-800"
               x-transition:leave-end="opacity-0 bg-transparent"
               >
    </button>

【参考方案1】：

对不起，如果我理解你的问题不好， 但我认为您可能需要在您的 alpine 组件中使用 :class=" "。

这个例子可以帮助你： https://codepen.io/pooya_poi/pen/mdBRobM

还要在 alpine 文档中检查这一点： https://alpinejs.dev/directives/bind#binding-classes

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review