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

Question

当用户在手机中打开导航栏时，我希望有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>

Answer 1

对不起，如果我理解你的问题很糟糕，但我认为你可能需要在你的高山组件中使用:class=" "。

这个例子可能会帮助你：

还要在高山文件中检查这一点：https://alpinejs.dev/directives/bind#binding-类
检查此代码：实例

<div x-data="{opacity:false}"
class="ml-5 mt-5">

<button @click="opacity = !opacity" 
class="bg-gray-800 hover:bg-gray-600 text-white py-1 px-2 rounded-md">change opacity</button>
<div :class="opacity ?'opacity-100':'opacity-25' "
class="mt-2 transition ease-in duration-200">
<span class="bg-blue-500 text-white px-2 py-1">Some text</span>
<span class="bg-red-500 text-white px-2 py-1">Some text</span>
<span class="bg-yellow-500 text-gray-800 px-2 py-1">Some text</span>
</div>

</div>