我有一个微调器，它在发出ajax请求时显示。它在React JS组件中。在大多数浏览器中都可以正常工作。但是，在Windows 8.1的IE中，css旋转动画也应用于替换的元素，即，当DOM中的Spinner div被内容div替换时，内容div正在旋转。
复制此行为的示例代码：
HTML：
<!DOCTYPE html>
<html>
<head>
<script src="js/build/react.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div id="content"></div>
<script src="js/build/helloworld.js"></script>
</body>
</html>
CSS：
body {
background-color: LightPink;
}
.box {
background-color: HotPink;
width: 200px;
height: 200px;
}
@-webkit-keyframes spin {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loader {
-webkit-animation: spin 0.75s infinite linear;
animation: spin 0.75s infinite linear;
width: 3rem;
height: 3rem;
border-radius: 50%;
border: 6px solid transparent;
border-right-color: #fff;
display: inline-block;
}
Js：
var Component = React.createClass({
getInitialState:function () {
return {loading:false};
},
handleClick:function () {
this.setState({loading:!this.state.loading});
console.log(this.state);
},
render:function () {
var content;
if (this.state.loading) {
content = <div className="loader"></div>
} else {
content = <div className="box"></div>
}
return (
<div>
<a href="#" onClick={this.handleClick}>Click me!</a>
<div>
{content}
</div>
</div>
);
}
});
React.render(
<Component />,
document.getElementById('content')
);
上面的代码在这里可用：https :
//github.com/anulaibar/react-spinner
在此处运行示例：http :
//react-spinner.herokuapp.com/
单击一次可隐藏粉红色div并显示微调器。再次单击以查看粉色div旋转的错误。
感谢您的输入！
我没有要测试的IE，但尝试更改此代码：
var content;
if (this.state.loading) {
content = <div className="loader"></div>
} else {
content = <div className="box"></div>
}
对此：
var content;
if (this.state.loading) {
content = <div className="loader" key="loader"></div>
} else {
content = <div className="box" key="box"></div>
}
不同之处在于，在第一个代码中，React会说“哦，className更改了，我将更that.className改为'box'”。在第二个示例中，它看到键已更改，并且甚至不比较className即可重新创建元素。
这是基于我的猜测，当类由于错误而更改时，IE不会删除动画，并且删除元素将解决问题。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句