转换持续时间不适用于Firefox

Question

我在SVG g标签上使用了转换转换和缩放，并提供了过渡持续时间：1s。在Chrome中运行正常。

问题是持续时间效果在FireFox中不起作用。

let mapStyle = {
    transitionDuration: "700ms",
    transformOrigin: "center"
};
return(
    <g className="map" style={mapStyle} ref={(n) => this.topologyGroup = n}>
        <RingGroup fabrics={fabrics}/>
    </g>
);

<g class="map" style="transition-duration: 700ms; transform-origin: center center 0px;"> </g>

Answer 1

尝试一下，我认为它对您有用。 transform 值存在问题，在 Firefox 中，transform前缀为 -moz-transform 。您应该在带 transform-duration：700ms; 属性的prefix属性下面使用这样的属性。

-moz-transition-property: -moz-transform;