I’ve added a simple ontransitionend
listener. The code works in Firefox and Chrome, but doesn’t in Safari (desktop + iOS). I’ve tried syntax variations and used AlpineJS (Codepen) to do the same. But the problem appears to be with Safari not reacting at all to transition events. What could be happening here?
const el = document.getElementById('hasTransition');
el.ontransitionend = () => {
document.getElementById('message').classList.remove('hidden');
};
#hasTransition{
transition: all linear 200ms;
}
.hidden{
opacity: 0;
}
<button onclick="el.classList.remove('hidden')">
Click to trigger a transition
</button>
<p id="message" class="hidden">We've detected a transition.</p>
<p id="hasTransition" class="hidden">✨ I'm visible ✨</p>