为什么在反应过渡组中显示下拉菜单后动画会重置

Question

我正在尝试为当前正在处理的下拉组件中的箭头设置动画，我希望当下拉组件打开时，箭头旋转180度，当它关闭时，它应该会恢复正常。这是代码

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

但由于某些原因，箭头在达到180度后又回到了0度

这是转换动画的CSS代码

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

这是一个工作示例代码沙盒的链接

Answer 1

你把类名搞砸了，应该是：

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