javascript - SVG 动画在 Firefox 上不起作用

Question

我正在尝试使用此动画

http://codepen.io/dbj/full/epXEyd

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 寻求帮助，或者向他们发布错误报告。