如何实现Styled-Components方块从绿色到蓝色的1秒平滑颜色过渡？

下面给你几种常用的实现方式，按需选择：

1. 鼠标悬停时触发颜色过渡 #

直接在styled组件里添加transition属性定义过渡规则，再通过:hover伪类修改背景色：

const Square = styled.div`
  width: 40px;
  height: 40px;
  background: green;
  /* 定义background属性的过渡效果，时长1秒 */
  transition: background 1s ease;

  &:hover {
    background: blue;
  }
`;

鼠标移到方块上时，就会从绿色平滑过渡到蓝色，移开后会自动变回绿色，同样是1秒过渡时长。

2. 自动循环颜色过渡 #

如果需要方块自动反复在绿蓝之间切换，可以用CSS动画实现：

const Square = styled.div`
  width: 40px;
  height: 40px;
  /* 调用自定义动画，时长1秒，无限循环，来回过渡 */
  animation: colorShift 1s ease-in-out infinite alternate;

  @keyframes colorShift {
    from {
      background: green;
    }
    to {
      background: blue;
    }
  }
`;

alternate关键字会让动画在结束后反向播放，实现来回切换的效果。

3. 通过React状态手动控制过渡 #

如果需要通过按钮或者其他交互触发颜色切换，可以结合React状态实现：

import { useState } from 'react';
import styled from 'styled-components';

const Square = styled.div`
  width: 40px;
  height: 40px;
  background: ${props => props.bgColor};
  transition: background 1s ease;
`;

function App() {
  const [isBlue, setIsBlue] = useState(false);

  return (
    <div>
      <Square bgColor={isBlue ? 'blue' : 'green'} />
      <button onClick={() => setIsBlue(!isBlue)}>切换颜色</button>
    </div>
  );
}

点击按钮时，状态切换会触发背景色变化，加上transition属性就能实现平滑过渡。

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