时间戳

首页 > 解决方案 > 在 react-redux 中使用三元运算符时将动画应用于替换的内容

css - 在 react-redux 中使用三元运算符时将动画应用于替换的内容

问题描述

我正在使用三元运算符来显示加载微调器，然后再将其替换为实际内容。下面的代码在 Firefox 和 Chrome 中正常工作，但是动画继续在 IE 中的替换内容上发生。

这将导致替换的内容像加载器一样旋转：

<div className="wrapper">
    {isFetching ? <div className="loader large" /> : <div>{children}</div>}
</div>

这解决了这个问题：

<div className="wrapper">
    {isFetching && <div className="loader large" />}
    {!isFetching && <div>{children}</div>}
</div>

这也解决了这个问题（防止自我关闭 div）：

<div className="wrapper">
    {isFetching ? <div className="loader large">a</div> : <div>{children}</div>}
</div>

加载器 SASS：

.loader {
  animation: spin 1s linear infinite;
  border: .5rem solid $grey;
  border-radius: 50%;
  border-top: .5rem solid $loader-border-color;
  height: 2rem;
  position: absolute;
  right: 2rem;
  top: 7.2rem;
  width: 2rem;
  z-index: 10;

  &.large {
    height: 7rem;
    margin: auto;
    position: relative;
    right: 0;
    top: 0;
    width: 7rem;
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }
}

我最初的想法是加载器 div 正在被修改而不是被删除并创建了一个新的 div。我知道我有两个解决问题的方法，但我想知道为什么会这样，因为该项目使用了很多三元运算符，并且全部替换它们会带来不便。

标签： cssreactjsinternet-explorersassreact-redux

解决方案

推荐阅读