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

我正在尝试向

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;

函数应用程序（）{
常数[cardWidth，setCardWidth]=useState（“600px”）；
常量设置样式=（卡片宽度）=>{
设置卡片宽度（卡片宽度）；
}
const HomeCard=styled.div`
保证金：0自动；
背景色：#fff；
文本对齐：居中；
边界半径：12px；
宽度：${cardWidth}；
过渡：宽度2s；
高度：600px；
`
返回(
正文
如果你不愿意，那你就只能坐在那里了
setStyle（“100%”}>查看动画
);
}
导出默认应用程序；

您可以设置

转换延迟

CSS属性，以指定开始转换之前等待的持续时间

或短的

转换：| | | | | |[，…]

关于CSS转换


我建议为HomeCard元素创建类

.home卡{
宽度：600px；
过渡：宽度2s；
}
.宽{
宽度：100%；
过渡：宽度2s；
}

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

函数应用程序（）{
const[isWide，setIsWide]=useState（false）；
const toggleAnimation=（）=>{
setIsWide（prev=>！prev）；
}
返回(
请看动画
);
}
这不是你想要的吗？