页面加载后，Safari 仅加载一次带有 javascript 和 css 的动画答案

【问题标题】：Animation with javascript and css only loaded once by Safari after page load页面加载后，Safari 仅加载一次带有 javascript 和 css 的动画
【发布时间】：2021-11-15 10:32:35
【问题描述】：

我正在网站上创建登录弹出窗口。我刚刚注意到，当使用 Safari 多次打开弹出窗口（打开和关闭它）时，动画只会在页面加载后第一次打开模式时显示。在 Chrome 中，一切正常，每次都会显示动画。我在这个 codepen 中简化了问题，问题也很明显。 https://codepen.io/bvonr/pen/BaZVxxK 这种行为的原因是什么。我该如何解决这个问题，以便动画不仅在 Chrome 中而且在 Safari 中一直显示？我认为问题出在我的 CSS 的这些行中。

.animate {
    animation: zoom 0.6s
}
@keyframes zoom {
    from {transform: scale(0)}
    to {transform: scale(1)}
}

【问题讨论】：

标签： javascript html css safari

【解决方案1】：

“在我的页面加载之前发生的事情”的一个常见解决方案是监听页面已加载事件，然后做一些事情：

window.addEventListener('load', () => {
  const myAnimationElement = document.querySelector("#my-animation-element")
  myAnimationElement.classList.add("animate");
});

只有在整个页面和所有相关资源都加载完毕时才会触发此事件。 load event

关于您的 CSS，它似乎很好，如果这不能解决问题，您可以尝试在页面卸载之前从元素中删除类并使用它删除动画，方法是监听正确的事件，然后在触发时删除类，但这似乎很奇怪，您需要这样做。 unload event

我也会查看这个网页：https://caniuse.com/?search=animations

我希望这会有所帮助，如果没有，我很抱歉。

【讨论】：

感谢您的反馈。根据 caniuse.com，Safari 支持动画和变换。事件监听器也没有帮助我发现错误。我不知道我是否理解你的意思，但是当我使用处理程序时，并且在我确保所有内容都已加载后执行脚本时，Safari 仍然只显示一次动画。 Chrome 仍然一直这样做。卸载事件可能为此付出了太多努力。我以为有一个明显的错误或者我忘记了什么。无论如何，非常感谢您的帮助。