Как l oop через массив, чтобы показать и скрыть текст на ReactJS

Question

У меня есть демо . Это простое React приложение, в котором я отображаю массив текста. Я хотел бы l oop через массив и скрыть и показать текст. Я думал, что смогу сделать это в React, но теперь думаю, что это может быть с CSS. Я могу скрыть и показать первый цвет, но как я могу l oop через цвета, чтобы он показывал Красный , затем Зеленый и др. c.

*{
  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;
} */

Answer 1

Если по какой-то причине вам нужно хранить логи анимации c внутри файла CSS, то вам понадобится Sass / S css для построения al oop (см. Пример здесь ). Pure CSS не сможет этого достичь.

Однако гибрид React / inline CSS может помочь. В вашем компоненте React:

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

Вам также может понадобиться обновить анимацию следующим образом, чтобы показ / скрытие происходило последовательно. Для вышеприведенной анимации 30-х годов с 6 цветами, следующие настройки анимации будут воспроизводиться правильно.

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

Для проработки математики анимации просто убедитесь, что выполнены следующие 2 вещи:

Для n элементов в массиве, от которых вы будете * sh до l oop:

1. Процент времени, в течение которого элемент отображается на экране, должен составлять 100 / n (в нашем примере выше, это кадры в диапазоне от 0% до 16,6%, где непрозрачность не равна 0).

2. Каждый элемент задерживается на m / n, где m - длина анимации (снова в нашем примере выше вся анимация занимает 30 секунд, поэтому каждый элемент задерживается на дополнительные 5 секунд).