Windows 8.1 Css动画微调器在Windows 8.1的IE中用于React JS组件时存在缺陷

我有一个在发出ajax请求时显示的微调器。它位于React JS组件中。在大多数浏览器中都可以正常工作。 但是，在Windows 8.1上的IE中，css旋转动画也应用于被替换的元素，即当DOM中的旋转器div被content div替换时，content div正在旋转

复制此行为的示例代码：

Html:

Js:

var Component=React.createClass({
getInitialState:函数（）{
返回{loading:false}；
},
handleClick:函数（）{
this.setState（{loading:！this.state.loading}）；
console.log（this.state）；
},
渲染：函数（）{
var含量；
if（this.state.loading）{
内容=
}否则{
内容=
}
返回(
{content}
);
}
});
反应(
,
document.getElementById（'content'）
);

以上代码在此处可用：

此处运行示例：

单击一次以隐藏粉红色div并显示微调器。再次单击以查看粉红色div旋转的bug

---

谢谢你的意见

我没有要测试的IE，但请尝试更改此代码：

    var content;
    if (this.state.loading) {
        content = <div className="loader"></div>
    } else {
        content = <div className="box"></div>
    }

var内容；
if（this.state.loading）{
内容=
}否则{
内容=
}

为此：

    var content;
    if (this.state.loading) {
        content = <div className="loader" key="loader"></div>
    } else {
        content = <div className="box" key="box"></div>
    }

var内容；
if（this.state.loading）{
内容=
}否则{
内容=
}

不同之处在于，在第一个代码中，React会说“哦，类名改变了，我将把

这个.className

改成

'box'

”。在第二个示例中，它看到键已更改，并在不比较类名的情况下重新创建元素

这是基于我的猜测，IE没有删除动画时，类的变化，由于一个错误，删除元素将解决问题

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')
);

    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>
    }