当在 React JS 组件中使用时，Css 动画微调器在 Windows 8.1 上的 IE 中存在错误

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

复制此行为的示例代码：

<!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 会说"哦，类名改变了，我只是把that.className改成'box'"。在第二个示例中，它看到键已更改并重新创建元素，甚至不比较类名。

这是基于我的猜测，即当类因错误而更改时，IE 不会删除动画，并且删除元素将解决问题。

相关内容

最新更新

热门标签：