SVG 动画不适用于 Firefox

Question

我正在尝试使用这个动画

var tl = new TimelineLite;
tl.staggerFromTo(".bottom", 0.8, {alpha: 0}, {alpha: 1, fill: "#d6d6d6", delay: 1}, 0.25)
tl.fromTo("#rectangle", 5, {fill:"#d6d6d6", alpha: "0%", height: "7%"}, {fill: "#c8db2d", alpha: "100%", height: "65%", ease: Power3.easeInOut}, "-=1")
tl.staggerFromTo(".ray", 1, {alpha: 0}, {alpha: 1, fill: "#cee325"}, 0.02, "-=1.25")

在一个网站上，但它似乎与 Firefox 浏览器不完全兼容（在 chrome 上它工作得很好），有什么办法可以让它适用于所有浏览器吗？

我尝试更改对动画库的 javascript 调用，使用 from 而不是 fromTo 等等，在 chrome 中一切正常，但在 firefox 中却不行。（或者如果有人知道其他类似的动画我也可以使用它会很好 :D）。非常感谢！

Answer 1

如果我不得不猜测，我会说这是您使用的动画库的问题。

在动画中，它试图对 <rect> 元素的高度进行动画处理，以产生上升填充效果。注意下面代码中高度 7%->66% 的过渡。

.fromTo("#rectangle", 7, {fill:"#000", alpha: "0%", height: "7%"}, {fill: "#f5e317", alpha: "100%", height: "66%", ease: Power3.easeInOut}, "-=1")

当动画运行时，矩形的高度实际上并没有改变。所以我怀疑这可能是动画库在动画期间设置高度的方式存在错误或不兼容。

缩减演示：http://codepen.io/anon/pen/Vjadwm

如果您在这里得不到答案，我会考虑向 Greensock 寻求帮助，或者与他们一起发布错误报告。

SVG 动画不适用于 Firefox

SVG animation not working on firefox

javascript

css

firefox

svg

gsap