时间戳

首页 > 解决方案 > 如何遍历数组以在 ReactJS 上显示和隐藏文本

css - 如何遍历数组以在 ReactJS 上显示和隐藏文本

问题描述

我有一个演示。这是一个简单的React应用程序，我在其中显示一组文本。我想遍历数组并隐藏和显示文本。我认为我可能能够做到这一点，React但我认为现在它可能必须与CSS. 我可以隐藏并显示第一种颜色，但我如何循环显示颜色，以便显示红色然后显示绿色等。

*{
  font-family: Lato;
}

@keyframes fade-animation {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


.titles{
  position: relative;
  text-align: center;
}

.titles p{
  font-size: 40px;
  position: absolute;
  opacity: 0; 
}

.titles p:nth-child(1) {
  animation: fade-animation 5s linear 0s infinite;
}
/* .titles p:nth-child(2) {
  animation: fade-animation 5s linear 15s infinite;
} */

标签： cssreactjs

解决方案

如果由于某种原因您必须将动画逻辑保留在 CSS 文件中，那么您将需要 Sass/Scss 的帮助来构建循环（请参见此处的示例）。纯 CSS 将无法实现这一点。

但是，React/内联 CSS 的混合可能会有所帮助。在您的 React 组件中：

{colors.map((color, i) => (
      <p style={{animation: `fade-animation 30s linear ${i * 5}s infinite`}}>{color}</p>
))}

您可能还需要按如下方式更新动画，以便显示/隐藏按顺序进行。对于以上 6 色的 30s 动画，以下动画设置将正确播放。

@keyframes fade-animation {
  0% {
    opacity: 0;
  }
  8.3% {
    opacity: 1;
  }
  16.6% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

要计算动画数学，只需确保以下两件事：

对于n您希望循环的数组中的项目：

  1. 项目在屏幕上可见的时间百分比应该是100 / n（在我们上面的示例中，它是介于 0% - 16.6% 之间的帧，其中不透明度不为 0）。

  2. 每个项目被延迟动画m / n的m长度（在我们上面的示例中，整个动画需要 30 秒，因此每个项目被额外延迟 5 秒）。

推荐阅读