Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
2.8k views
in Technique[技术] by (71.8m points)

javascript - Stopping transition in 50% opacity in Alpine js transitions

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.

My code:

    <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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
等待大神答复

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...