I'm trying to figure out how to have an overlay div element transitioning from and to opacity-30 when input is provided in a field.
The problem is that after the transition finishes, the opacity goes to 100.
If I put in opacity-30 in the div's class, the transition won't show.
:class="{ 'opacity-30': searchQuery.length > 2}" will neither work as that will insert opacity-30 at once.
<html>
<head>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
</head>
<body>
<div x-data="{ searchQuery: '' }" class="p-10">
Input: <input x-model="searchQuery" type="text" class="w-32 border border-black">
<div x-cloak x-show="searchQuery.length > 2" x-transition:enter="transition ease-out duration-1000" x-transition:leave="transition ease-in duration-1000" x-transition:enter-start="opacity-0 transform"
x-transition:enter-end="opacity-30 transform" x-transition:leave-start="opacity-30 transform"
x-transition:leave-end="opacity-0 transform" class="bg-black fixed h-full left-0 top-16 w-full">
</div>
</div>
</body>
</html>
question from:
https://stackoverflow.com/questions/65894207/tailwindalpine-transition-to-from-opacity-30 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
