Why does the animation resets after the dropdown is shown in react-transition-group?-CodePudding

I am trying to animate the arrow in the dropdown component that I am currently working on, and I expect the arrow to rotate by 180 degrees when the dropdown opens and when it closes it should go back to normal. Here is the code

import React, { useEffect, useRef, useState } from "react";
import { ChevronDown } from "react-feather";
import { TransitionGroup, CSSTransition } from "react-transition-group";
import useClickOutside from "../Hooks/useClickOutside";
import "./Dropdown.css";

const Dropdown = ({ value, initialValue }: any) => {
  const [isDropdownVisibile, setIsDropdownVisible] = useState(false);
  const [textValue, setText] = useState(initialValue);
  const closeDropdown = () => setIsDropdownVisible(false);
  const toggleDropdown = () => setIsDropdownVisible(!isDropdownVisibile);
  const dropdownRef = useClickOutside(closeDropdown);
  

  return (
    <>
      <div className="dropdown-container" ref={dropdownRef}>
        <button className="drp-btn" onClick={toggleDropdown}>
          <span className="main-text">{textValue}</span>
          <CSSTransition
            classNames={"arrow-down-anim"}
            timeout={400}
            in={isDropdownVisibile}
          >
            <ChevronDown
              color="#3d3d3d"
              height={20}
              width={20}
            />
          </CSSTransition>
        </button>
        {isDropdownVisibile && (
          <div className="dropdown-content">
            {value.map((item: any) => {
              return (
                <button
                  className="dropdown-item"
                  onClick={() => {
                    setText(item);
                    closeDropdown();
                  }}
                  key={item}
                >
                  {item}
                </button>
              );
            })}
          </div>
        )}
      </div>
    </>
  );
};

export default Dropdown;

Dropdown.defaultProps = {
  value: ["25 L", "26 L", "27 L", "28 L", "29 L", "30 L"],
  initialValue: "35 L",
};

But due to some reasons, the arrow comes back to 0 degrees after it goes to 180 degrees

Here is the CSS code for the transition animation

.arrow-down-anim-enter {
  transform: rotate(0deg);
}

.arrow-down-anim-enter-active {
  transform: rotate(180deg);
  transition: 0.4s ease-in-out;
}

.arrow-down-anim-exit {
  transform: rotate(180deg);
}

.arrow-down-anim-exit-active {
  transform: rotate(0deg);
  transition: 0.4s ease-in-out;
}

Here is the link for a working example codesandbox

CodePudding user response：

You have messed with class names, should be:

.arrow-down-anim-enter {
  transform: rotate(0deg);
}

.arrow-down-anim-enter-active {
  transform: rotate(180deg);
  transition: 0.4s ease-in-out;
}

.arrow-down-anim-enter-done {
  transform: rotate(180deg);
}