为什么野生动物园忽略了像TressitionEnd这样的过渡事件？

发布于 2025-01-19 07:13:01 字数 982 浏览 2 评论 0原文

我添加了一个简单的 ontransitionend 监听器。该代码适用于 Firefox 和 Chrome，但不适用于 Safari（桌面 + iOS）。我尝试过语法变化并使用 AlpineJS (Codepen) 来执行相同的操作。但问题似乎是 Safari 对转换事件根本没有反应。这里可能发生什么？

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>

原文

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>

分享到QQ

分享到微博