转换持续时间在 Firefox 中不起作用

【问题标题】：Transform duration not working in firefox转换持续时间在 Firefox 中不起作用
【发布时间】：2019-06-25 16:27:28
【问题描述】：

我已经在 SVG g 标签上使用了 transform translate 和 scale 并提供了 transition-duration: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>

【问题讨论】：

标签： css reactjs firefox svg jsx

【解决方案1】：

试试这个我认为它对你有用这是 transform 值的问题，在 Firefox 中，transform 以 -moz-transform 为前缀.您应该在具有 transform-duration: 700ms; 属性的前缀属性下方使用这样的方法。

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

【讨论】：

按照您的建议尝试了前缀，但遇到了同样的问题。这是css：- .map { -webkit-transition-duration: 700ms; -moz 过渡持续时间：700 毫秒； -ms 过渡持续时间：700 毫秒； -o-过渡持续时间：700 毫秒；过渡持续时间：700ms； -moz 过渡属性：-moz 变换；如果我错了，请纠正。