时间戳

首页 > 解决方案 > 页面加载后，Safari 仅加载一次带有 javascript 和 css 的动画

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

问题描述

我正在网站上创建登录弹出窗口。我只是注意到，当使用 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)}
}

标签： javascripthtmlcsssafari

解决方案

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

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

此事件仅在整个页面和所有相关资源都已加载时才会触发。加载事件

关于您的CSS，它似乎很好，如果这不能解决它，您可以尝试在页面卸载之前通过监听正确的事件然后在它触发时删除该类，从您的元素和动画中删除该类，但这似乎很奇怪你需要这样做。卸载事件

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

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

推荐阅读