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;
  }
}