為什么在react-transition-group中顯示下拉選單后影片會重置？-有解無憂

我正在嘗試為我當前正在處理的下拉組件中的箭頭設定影片，并且我希望當下拉選單打開時箭頭旋轉 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;
}

這是一個作業示例代碼框的鏈接

uj5u.com熱心網友回復：

你弄亂了類名，應該是：

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/432844.html

標籤：javascript css 反应反应过渡组

上一篇：為什么我的網站頁面主題在導航欄（引導程式）后面？

下一篇：使用JS檢查子元素是否包含值