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等，一切正常，但在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上运行

1 个答案: