为什么在 react-transition-group 中显示下拉菜单后动画会重置？

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

这里是 link 的工作示例 codesandbox

Answer 1

你弄乱了 class 个名字，应该是：

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

为什么在 react-transition-group 中显示下拉菜单后动画会重置？

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

javascript

css

reactjs

react-transition-group