Change css className of a div with animated transition - css

Question

I am replacing the className of a div with button. But while doing this, I want to do it with animated transition while className change. In the code below, the className is changing, but without animated transition. How can I add the animated transition while class is changing?
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;

Answer 1

This can be done just by writing some CSS transition in your code. You may do something like this :
.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;
}
now when the state is changing from the initial value classes.container to updated value classes.containerMore .it makes this change in the state a little smoother.
I made a demo in codesandbox that applies How You can add the animated transition while class is changing.