Question

我正在使用Semantic UI库来构建我的React应用。我正在使用Loader，并且在组件的某个地方有类似以下内容的内容：

if (loading) {
  return (
    <div>
      <div className="ui active inline loader" />
    </div>
  );
}

，一切正常。但是，Loader不在div中居中，因此我将包装器div修改为<div className="centered">，其中：

.centered {
  display: flex;
  align-items: center;
  justify-content: center;
}

现在，Loader已居中，但在Safari浏览器中没有旋转！怎么解决？

在Chrome中运行正常。

Answer 1

要解决居中问题，您可能需要Webkit：

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
justify-content: center;

然后让我对动画很幽默，是否使用CSS动画（关键帧）完成了？如果您是您，可能错过了动画的最后一站，并忘记了100％关键帧？我认为这以前使我感到震惊。

装入程序在flex容器中时不会旋转

1 个答案: