React组件中Tailwind CSS Position Transition过渡不生效求助

你的代码里，关闭模态框时因为{isOpen && ...}会直接移除整个模态框DOM元素，导致过渡动画还没执行完成就被销毁，所以看不到预期的滑动效果。下面是具体的修复方案：

核心思路 #

拆分状态控制：用一个状态控制模态框是否渲染在DOM中，另一个状态控制动画类名切换；监听过渡结束事件，等动画完全执行完再移除DOM。

修改后的完整代码 #

import { useState, useRef, useEffect } from 'react';

function DivModal() {
  // 控制模态框是否存在于DOM中
  const [showModal, setShowModal] = useState(true);
  // 控制侧边栏的动画状态
  const [isOpen, setIsOpen] = useState(true);
  const slideContainerRef = useRef(null);

  // 监听过渡结束事件，动画完成后再卸载模态框
  useEffect(() => {
    const handleTransitionEnd = () => {
      if (!isOpen) {
        setShowModal(false);
      }
    };

    const container = slideContainerRef.current;
    if (container) {
      container.addEventListener('transitionend', handleTransitionEnd);
    }

    // 组件卸载时移除事件监听，避免内存泄漏
    return () => {
      if (container) {
        container.removeEventListener('transitionend', handleTransitionEnd);
      }
    };
  }, [isOpen]);

  const handleOpen = () => {
    // 先渲染模态框，延迟触发动画确保DOM已加载
    setShowModal(true);
    setTimeout(() => setIsOpen(true), 10);
  };

  const handleClose = () => {
    // 先触发关闭动画，等动画结束再移除DOM
    setIsOpen(false);
  };

  return (
    <div>
      <button onClick={handleOpen} className={buttonStyle}>Open</button>
      {showModal && (
        <div className='fixed top-0 left-0 w-full h-full bg-black/50'>
          <div 
            ref={slideContainerRef}
            className={`fixed top-0 ${isOpen ? 'left-0' : '-left-full'} flex transition-left duration-1000 ease-in-out`}
          >
            <ul className='bg-white w-64 p-4'>
              <li>first</li>
              <li>second</li>
              <li>third</li>
            </ul>
            <button onClick={handleClose} className='ml-4 text-white'>close</button>
          </div>
        </div>
      )}
    </div>
  );
}

关键修复点说明 #

• 拆分状态：showModal负责DOM的存在与否，isOpen负责动画类名切换，避免动画未完成就销毁元素。
• 过渡事件监听：通过ref绑定滑动容器，监听transitionend事件，确保动画执行完毕后再移除模态框。
• 打开动画延迟：设置10ms延迟触发打开动画，确保模态框DOM已经渲染完成，动画能正常触发。
• 明确容器宽度：给侧边栏ul添加w-64，确保滑动时有明确的宽度，动画效果更直观。

内容的提问来源于stack exchange，提问作者milanHrabos