顺风随着它的变化在背景中淡出

Question

我正在尝试循环浏览我的 astro 网站上的一些背景图片，它的设置是这样的。

const backgroundClasses = {
  deliver: 'bg-deliver animate-fade',
  design: 'bg-design animate-fade',
  develop: 'bg-develop animate-fade'
}

const OurValues = () => {
  const [selected, setSelected] = useState('none')

  useEffect(() => {
    const timeout = setInterval(() => {
      if (selected === 'none') setSelected('design')
      if (selected === 'design') setSelected('develop')
      if (selected === 'develop') setSelected('deliver')
      if (selected === 'deliver') setSelected('none')
    }, 3000)

    return () => {
      clearInterval(timeout)
    }
  }, [selected])
  return (
    <div
      className={`pb-32 bg-black bg-cover bg-no-repeat bg-right ${
        selected === 'none' ? 'bg-black' : backgroundClasses[selected]
      } `}
    >

我的背景不透明度的配置（不确定我是否可以这样做）

目前，背景对我来说正在发生变化。 当我循环浏览它时，它只是出现并没有很好的淡入淡出。

module.exports = {
  content: ['./src/**/*.{astro,html,js,jsx,md,svelte,ts,tsx,vue}'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Roboto', 'sans-serif', ...defaultTheme.fontFamily.sans]
      },
      colors: {
        beige: '#F0ECE8'
      },
      backgroundImage: {
        hero: "url('background.webp')",
        design: "url('design.webp')",
        develop: "url('develop.webp')",
        deliver: "url('deliver.webp')"
      },
      animation: {
        text: 'text 5s ease infinite',
        fade: 'fadeIn 5s ease-in-out'
      },
      keyframes: {
        text: {
          '0%, 100%': {
            'background-size': '200% 200%',
            'background-position': 'left center'
          },
          '50%': {
            'background-size': '200% 200%',
            'background-position': 'right center'
          }
        },
        fadeIn: (theme) => ({
          '0%': { '--tw-bg-opacity': '0%' },
          '100%': { '--tw-bg-opacity': '100%' }
        })
      }
    }
  },
  plugins: []
}

Answer 1

抱歉，我无法发表评论。 缺少一些声誉...

您绝对可以在 tailwind.config 文件中添加自定义关键帧和动画，它应该可以正常工作。

但是，我不确定您为什么需要箭头 function（主题）=> ...也许可以尝试以这种方式制作关键帧：

keyframes: {
   'fade-in': {
      'from': {
         opacity: '0'
      },
      'to': {
         opacity: '1'
      },
   },
}
animation: {
   'fade-in': 'fade-in 0.5s ease-out'
}