@pashkevich-d

Как сделать анимацию появления текста по букве в реакте?

Всем привет! Подскажите, плиз, как правильно сделать анимацию вывода текста по букве, как будто его кто-то печатает на экране. Пока какая-то ерунда получается 5e9dab7660942492426094.jpeg
  • Вопрос задан
  • 358 просмотров
Решения вопроса 1
@rjyk
let text = 'qwertyu';
let output = '';
let currentIndex = 0;

let intervalID = setInterval(() => {
    output += text[currentIndex];
    currentIndex += 1;
    console.log(output);
    if (currentIndex === text.length) {
        clearInterval(intervalID)
    };
}, 1000)


Также рекомендуют это делать через useEffect хук:
function RenderSubtitle() {
  const [subtitle, setSubtitle] = useState('');
  const text = 'qwertyu';
  let currentIndex = 0;

  useEffect(() => {
    const id = setInterval(() => {
      setSubtitle(prev => prev + text[currentIndex] );
      currentIndex += 1;
      if (currentIndex === text.length) {
          clearInterval(id)
      };
    }, 1000);
    return () => clearInterval(id);
  }, []);

  return <h1>{subtitle}</h1>;
}
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@alalala
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы