React中实现文字闪烁n秒后停止闪烁

闪烁动画的css写法

.blink {
  animation: blink 1s linear infinite;
}

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

JSX中给组件绑定动画

import styles from '../index.less'; // 导入写好的样式

const [isBlink, handleBlink] = useState(true); // 控制组件闪烁的状态
const blinkRef = useRef(); // 记录定时器的ID

useEffect(() => {
    handleBlink(true);
    clearTimeout(blinkRef.current); // 清除上一个定时器，防止多个定时器互相干扰
    blinkRef.current = setTimeout(() => {
      handleBlink(false);
    }, 3000); // 定时三秒后通过改变状态去除闪烁样式
  }, [now]); // 触发文字闪烁的条件
	
<em className={isBlink && styles.blink}>闪烁文字</em> // 给需要闪烁的文字动态添加闪烁样式