通过 JS 启动的 CSS 动画不适用于 Safari答案

【问题标题】：CSS animation started via JS not working with Safari通过 JS 启动的 CSS 动画不适用于 Safari
【发布时间】：2018-03-30 05:56:55
【问题描述】：

我正在使用一个简单的 CSS 动画来创建基于不透明度的淡入效果。动画通过 JS 启动，以等待浏览器完成加载。它适用于 Firefox 和 Chrome，但不适用于 Safari。有趣的是，它也可以在本地与 Safari 一起使用，即如果浏览器加载保存在本地计算机上的网站数据！如果网站数据是从外部服务器加载的，则它不适用于 Safari。

我发现如果我让 Safari 显示“网络信息”或设置“响应式设计”模式，动画也会以涉及的外部服务器启动！

我可以使用 Safari 9 和 11（并清除缓存）对其进行测试。我找不到解决此问题或类似问题的任何现有线程。提前谢谢！

HTML：

<!DOCTYPE html>
<head>
   <meta charset="utf-8">
   <title>test</title>
   <link rel="stylesheet" href="stylesheet.css"/>
   <script src="js-script.js"></script>
</head>

<body>
<main>
   <div id="fading">
   Test
   </div>
</main>
</body>
</html>

CSS：

#fading {
   /* shorthand notation not always working with Safari */
   -webkit-animation-name: fadein;
   -webkit-animation-duration: 5s;
   -webkit-animation-timing-function: ease-in;
   -webkit-animation-play-state: paused;
   -moz-animation: fadein 5s ease-in;
   -moz-animation-play-state: paused;
   -o-animation: fadein 5s ease-in;
   -o-animation-play-state: paused;
   animation: fadein 5s ease-in;
   animation-play-state: paused;
}

@-webkit-keyframes fadein {
  from { opacity: 0}
  to   { opacity: 1}
}
@-moz-keyframes fadein {
  from { opacity: 0}
  to   { opacity: 1}
}
@-o-keyframes fadein {
  from { opacity: 0}
  to   { opacity: 1}
}
@keyframes fadein {
  from { opacity: 0}
  to   { opacity: 1}
}

JS：

"use strict";

function start() {
   var fading = document.getElementById("fading");
   fading.style.webkitAnimationPlayState = "running";
   fading.style.mozAnimationPlayState = "running";
   fading.style.oAnimationPlayState = "running";
   fading.style.animationPlayState = "running";
}

window.onload = start;

【问题讨论】：

你的意思是它永远不会起作用？即使你清除缓存？您可以尝试的一种解决方法是在 js 函数的开头触发重排（var fading = document.getElementById("fading"); fading.offsetWidth; 应该这样做）。但是您所描述的（在本地主机上工作）似乎很奇怪。此外，即使在 js 中，也要始终将符合规范的规则设置在最后。
是的，缓存已清除。我编辑了 js 脚本（和我的帖子）并最后设置了符合规范的规则。我还尝试了您提出的回流方法。但是动画仍然没有从外部从 Safari 开始。
... 很有趣。你能通过开发工具让它工作吗？您是否还有报告的 CSS 错误？
HTML 和 CSS 已经过验证。但是我发现如果让Safari显示“网页信息”或者设置“响应式设计”模式，可以让动画开始播放！

标签： javascript safari css-animations

【解决方案1】：

好吧，我最终决定采用一种不同的方法，使用 CSS 过渡。这似乎更适合 js 启动的淡入淡出效果，并且没有显示上述 Safari 问题。此外，JS 和 CSS 需要的代码行数更少。

CSS：

#fading {
   opacity: 0;
   -webkit-transition: opacity 5s ease-in;
   -moz-transition: opacity 5s ease-in;
   -o-transition: opacity 5s ease-in;
   transition: opacity 5s ease-in;
}

JS：

"use strict";

function start() {
   var fading = document.getElementById("fading");
   fading.style.opacity = 1;
}

window.onload = start;

【讨论】：