如何在React中用setInterval实现箭头透明度来回切换的闪烁效果

你的代码存在几个关键问题导致效果不生效：

• scrollOpacity不是React状态变量，直接赋值不会触发组件重渲染，UI自然不会更新。
• Tailwind的opacity类名格式错误，它的取值是opacity-0到opacity-100（对应0到1的透明度），不是直接写opacity-0或opacity-1。
• 每次scroll状态变化都会重新创建定时器，可能导致逻辑混乱。

方法一：用React状态+定时器修复 #

把scrollOpacity改成状态变量，同时调整定时器逻辑，避免重复创建：

import { useState, useEffect } from 'react';
import { HiOutlineChevronDown } from 'react-icons/hi';

function YourComponent() {
  const [isVisible, setIsVisible] = useState(true);

  useEffect(() => {
    const timer = setInterval(() => {
      setIsVisible(prev => !prev);
    }, 2000);
    
    return () => clearInterval(timer);
  }, []); // 空依赖，只在组件挂载时创建一次定时器

  return (
    <HiOutlineChevronDown
      className={`text-white mx-auto ${isVisible ? 'opacity-100' : 'opacity-0'} transition-opacity duration-500`}
    />
  );
}

方法二：用CSS动画（更简洁高效） #

不需要JS定时器，直接用CSS @keyframes实现闪烁，性能更好：

import { HiOutlineChevronDown } from 'react-icons/hi';

function YourComponent() {
  return (
    <HiOutlineChevronDown
      className="text-white mx-auto animate-blink"
    />
  );
}

然后在你的全局CSS文件（比如index.css）里添加动画：

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

.animate-blink {
  animation: blink 2s infinite;
}

如果用Tailwind CSS，也可以自定义动画：
在tailwind.config.js里添加：

module.exports = {
  theme: {
    extend: {
      animation: {
        blink: 'blink 2s infinite',
      },
      keyframes: {
        blink: {
          '0%, 100%': { opacity: '1' },
          '50%': { opacity: '0' },
        },
      },
    },
  },
};

之后直接用animate-blink类名即可，和上面的JSX代码一致。

内容的提问来源于stack exchange，提问作者Trey