Estoy tratando de animar la flecha en el componente desplegable en el que estoy trabajando actualmente, y espero que la flecha gire 180 grados cuando se abre el menú desplegable y cuando se cierra debería volver a la normalidad. Aquí está el código

 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", };

Pero debido a algunas razones, la flecha vuelve a 0 grados después de llegar a 180 grados.

Aquí está el código CSS para la animación de transición.

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

Aquí está el enlace para un ejemplo de trabajo codesandbox