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
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);
}