Day 274/300 React 实现文字从左到右的逐个闪动效果

（一）React

import React from 'react';
import {useLocalObservable} from "mobx-react-lite";

interface CreateProps {
}

const CreateModel: React.FC<CreateProps> = () => {

    const store = useLocalObservable<{[p: string]: any}>(() => ({
        index: 0,
        words: '',
    }))

    const originWords = 'https://blog.csdn.net/xinghuowuzhao?type=blog'
    function showNextText() {
        if (store.index < originWords.length) {
            store.words = store.words +originWords[store.index];
            store.index++;
        } else {
          clearInterval(intervalId); // 当所有文字都显示完毕后，停止循环
        }
    }
    const intervalId = setInterval(showNextText, 1000); // 每隔1秒显示下一个文字

    return (
        <>
            <div className={styles.info}>
                <span className={store.words.length!=originWords.length?styles.flashAnimation:''}>{store.words}</span>
            </div>
        </>
    )
}

export default CreateModel;

（二）CSS

.flashAnimation {
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}