将转换时间添加到 onclick 事件反应

Question

我正在尝试向onClick事件添加过渡时间。 HomeCard 元素以 600px 的宽度开始，并且随着按钮的onClick事件，它正确地变为 100% 宽度。 唯一的问题是我试图将转换延迟 2 秒，但它不起作用。 在这种情况下，添加过渡时间的正确方法是什么？

function App() {

const [cardWidth, setCardWidth] = useState("600px");

const setStyle = (cardWidth) => {
  setCardWidth(cardWidth);
}

const HomeCard = styled.div`
  margin: 0 auto;
  background-color: #fff;
  text-align: center;
  border-radius: 12px;
  width: ${cardWidth};
  transition: width 2s;
  height: 600px;
`

  return (
    <Wrapper>
      <LogoWrapper/>
      <HomeCard>
        <Header>Text</Header>
        <CardText>Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint</CardText>
        <Button onClick={() => setStyle("100%")}>See the animation</Button>
      </HomeCard>
    </Wrapper>
  );
}

export default App;

Answer 1

您可以设置transition-delay CSS 属性以指定在开始转换之前等待的持续时间。

或短transition: <property> || <duration> || <timing-function> || <delay> [, ...]; transition: <property> || <duration> || <timing-function> || <delay> [, ...];

有关 CSS 转换的更多信息

---

我建议为您的 HomeCard 元素创建类

.home-card{
  width: 600px;
  transition: width 2s 2s;
}
.wide{
  width: 100%;
  transition: width 2s 2s;
}

并有条件地在className中添加一个类名

function App() {
  const [isWide, setIsWide] = useState(false);

  const toggleAnimation = () => {
    setIsWide(prev => !prev);
  }

  return (
    <div className={isWide ? "home-card wide" : "home-card"}>
        <button onClick={toggleAnimation}>See the animation</button>
    </div>
  );
}