我正在用按钮替换div的className。但在这样做的同时,我想在className改变时使用动画过渡。在下面的代码中,className正在更改,但没有动画转换。如何在类变化时添加动画过渡?
import React, { useRef, useEffect, useState } from "react";
import classes from "./Card.module.css";
import { ClickAwayListener } from "@mui/base";
function Card(props) {
const [containerStyle, setStyle] = useState(classes.container);
const handleClick = () => {
setStyle(classes.containerMore);
};
const handleClickAway = () => {
setStyle(classes.container);
};
return (
<ClickAwayListener
mouseEvent="onMouseDown"
touchEvent="onTouchStart"
onClickAway={handleClickAway}
>
<div className={containerStyle}>
CONTAINER TITLE
<button className={classes.moreButton} onClick={handleClick}>MORE</button>
</div>
</ClickAwayListener>
);
}
export default Card;
这可以通过在代码中编写一些CSS transition
来完成。你可以这样做:
.containerMore {
background-color: #05040f;
color: white;
height: 220px;
width: 220px;
border-style: solid;
text-align: center;
transition-property: background-color, width, height;
transition-duration: 1s;
transition-timing-function: linear;
}
现在当状态从初始值classes.container
变化到更新值classes.containerMore
时,它使状态的变化更平滑。
我在codesandbox中做了一个演示,应用了如何在类改变时添加动画过渡。