CSS 加载动画在 NW.js (node-webkit) 中没有动画

Posted 2023-02-24

【中文标题】CSS 加载动画在 NW.js (node-webkit) 中没有动画

【英文标题】：CSS Loading animation not animating in NW.js (node-webkit)

【发布时间】：2015-10-11 02:07:46

【问题描述】：

Here is a jsfiddle 我的 CSS 加载动画正常工作。

但是，当我在我的 node-webkit 应用程序中使用相同的代码时，SVG 路径和颜色是静态的并且不显示动画。

经过一番研究，我尝试添加

"chromium-args": "--enable-threaded-compositing"

根据this issue 的解决方案将其添加到我的 package.json 文件中。不幸的是，这并没有解决我的问题。

根据this post 中第二个答案的建议，我正在为加载屏幕使用 CSS 动画。

我的动画是 this CodePen 的略微改动版本。

有没有人在 NW.js 中遇到过类似的 CSS 动画问题？此动画可能无法正常工作的任何原因？

我之前只有一个简单的旋转 CSS 动画，它在我的 NW.js 应用程序中运行良好。我对这种不一致感到困惑。

【问题讨论】：

不可能因为您在本地工作而无需加载那么简单，不是吗？

@kthornbloom 感谢您的想法，但加载内容仍需要大约 4 秒，因此图像仅显示为静态 4 秒。之前的加载动画只是一个旋转的图像，效果很好。

也遇到了这个问题。我有一个带有淡入淡出动画的角度 JS 应用程序，用于阻止 ng-route 的故障。在 chrome 中工作得很好，拒绝在 node-webkit（或现在的 nw.js）中工作

我也有类似的问题。我的一些动画部分在 NW 中工作，但在 Chrome 和 Chromium 中工作得很好。你们知道一些将 config-keys/switches/chrome://flags 从 Chromium 复制到 NW 的方法吗？我认为这可能会有所帮助，但我不知道自动化的方法。

@DarkoRiđić 和 JL Griffin 我今天收到一封电子邮件，说我打开的问题已更正并关闭：github.com/nwjs/nw.js/issues/2291

【参考方案1】：

CSS webkit 和 SVG 不能很好地结合在一起。

这只是使用动画/变换/@keyframe 引用的 CSS：

(-moz-webkit, -ms-webkit, -o-webkit, -webkit)

如果你注意到你的小提琴，CSS 会显示：

.activity-box img 
display: block;
position: absolute;
width: 40px;
height: 40px;
/* Below is the key for the rotating animation */
-webkit-animation: spin 1s infinite linear;
-moz-animation: spin 1s infinite linear;
-o-animation: spin 1s infinite linear;
animation: spin 1s infinite linear;

如果您可以使用.activity-box svg 而不是.activity-box img，那不是很好吗？

不幸的是，这不起作用，因为 svg 是在浏览器中呈现的，而不是 CSS webkit 转换。

<div id="flask">
<div class="background"></div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 113 130" xml:space="preserve">
    <g>
        <path fill="#E6E9EA" d="M0,0v130h112.084L111.75,0H0z M94.75,128C71,128,56,128,56,128s-14.873,0-38.623,0s-13.945-19.422-6.33-35.945S40,41.25,40,41.25V3h16h11v38.25c0,0,23.901,34.283,31.517,50.805S118.5,128,94.75,128z"></path>
        <path fill="none" stroke="#000000" stroke- stroke-miterlimit="10" d="M56,127.5c0,0-14.873,0-38.623,0s-13.695-19.172-6.08-35.695C18.912,75.283,40.5,41.25,40.5,41.25V2.5h-9H56h19.5h-8v38.75c0,0,23.651,34.033,31.267,50.555c7.615,16.523,19.733,35.695-4.017,35.695S56,127.5,56,127.5z"></path>
    </g>
</svg>
...
</div>

我会推荐：

a) 将动画转换为 .gif .png 或 .jpg 并且不使用 svg （编辑：.gif 也不转换，您可以使用 .png 文件类型，然后使用 javascript 为每个动画帧创建一个 img.src 交换函数）

b) 移除 CSS webkit 动画并重新设计您的 svg 以使用 svg 动画自行制作动画。见：https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateTransform

【讨论】：

为清晰起见更新了解决方案 A。 （两种方法都有工作实现，仅供参考）