React项目中Tailwind CSS的ease-in-out过渡失效及背景屏蔽需求

云上老周

2026-7-12

弹窗过渡失效与背景操作屏蔽解决方案

一、修复淡入过渡效果

过渡不生效的核心原因是初始状态未设置可过渡的隐藏属性，display: none无法触发CSS过渡，必须用opacity和visibility组合控制：

弹窗初始样式（隐藏状态）：

<div id="exit-modal" class="fixed inset-0 flex items-center justify-center bg-black/50 opacity-0 invisible transition-all ease-in-out duration-300">
  <!-- 弹窗内容 -->
  <div class="bg-white p-6 rounded-lg">
    <p>确认退出吗？</p>
    <button id="cancel-btn">取消</button>
  </div>
</div>

opacity-0：初始完全透明
invisible：初始不可见（避免点击穿透）
transition-all：对所有属性应用过渡

JavaScript控制显示/隐藏：

const exitBtn = document.getElementById('exit-btn');
const exitModal = document.getElementById('exit-modal');
const cancelBtn = document.getElementById('cancel-btn');

// 显示弹窗
exitBtn.addEventListener('click', () => {
  exitModal.classList.remove('opacity-0', 'invisible');
});

// 隐藏弹窗
cancelBtn.addEventListener('click', () => {
  exitModal.classList.add('opacity-0', 'invisible');
});

二、屏蔽背景操作（禁止滚动）

通过给body添加/移除overflow-hidden类实现：

修改JavaScript代码，在弹窗显示时给body加类，隐藏时移除：

// 显示弹窗
exitBtn.addEventListener('click', () => {
  exitModal.classList.remove('opacity-0', 'invisible');
  document.body.classList.add('overflow-hidden');
});

// 隐藏弹窗
cancelBtn.addEventListener('click', () => {
  exitModal.classList.add('opacity-0', 'invisible');
  document.body.classList.remove('overflow-hidden');
});