Change css className of a div with animated transition

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;

monim · Accepted Answer · 2022-07-21 11:56:26Z

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.

answered Jul 21, 2022 at 11:56

monim

4,4762 gold badges14 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Change css className of a div with animated transition

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related