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

原创于 2023-06-20 17:01:56 发布

· 574 阅读

0 ·

版权

文章标签：

#react.js #javascript #前端

该文章展示了一个使用React和MobX创建的组件，通过`useLocalObservable`管理状态，实现了一个文字逐字滚动的效果。CSS动画`@keyframesblink`用于产生闪烁效果，当所有文字显示完毕后自动停止。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（一）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.youkuaiyun.com/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;
  }
}