jQuery转ES6：fadeIn/fadeOut等效方案及透明度过渡问题

嗨，我来帮你搞定这个过渡问题！你之前的代码失败主要有两个原因：一是.screen初始设为display: none，这种状态下元素不会触发CSS过渡；二是初始opacity直接设为1，没有从0到1的变化空间，自然看不到过渡效果。下面给你一套完整的ES6实现方案：

第一步：调整CSS基础样式 #

首先修改.screen的CSS，让它支持过渡效果：

.screen {
  position: fixed;
  z-index: 9;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  opacity: 0; /* 初始完全透明 */
  visibility: hidden; /* 视觉隐藏，同时保留元素在文档流中（让过渡生效） */
  background: rgba(26, 31, 33, 0.96);
  transition: opacity 300ms ease; /* 定义透明度过渡：时长300ms，缓动曲线ease */
}

为什么用visibility而不是display？ 因为display: none会让元素脱离文档流，CSS过渡对这种状态变化无效；visibility: hidden只是隐藏元素的视觉表现，元素仍占据布局空间，能正常触发过渡效果。

第二步：ES6实现fadeIn和fadeOut函数 #

接下来写两个原生JS函数，对应jQuery的fadeIn和fadeOut：

fadeIn（淡入） #

const fadeIn = (element, duration = 300) => {
  // 先让元素可见，再触发透明度变化
  element.style.visibility = 'visible';
  element.style.opacity = '1';
};

fadeOut（淡出） #

const fadeOut = (element, duration = 300) => {
  element.style.opacity = '0';
  // 过渡结束后再隐藏元素，避免过渡中途元素还能被点击
  element.addEventListener('transitionend', function handler() {
    element.style.visibility = 'hidden';
    // 移除事件监听，防止重复触发
    element.removeEventListener('transitionend', handler);
  }, { once: true }); // { once: true } 可以让事件自动只触发一次，不用手动移除监听
};

第三步：在你的代码中调用 #

结合你现有的DOM加载逻辑，这样使用：

(function() {
  document.addEventListener("DOMContentLoaded", function() {
    const screenElement = document.querySelector('.screen');
    
    // 调用fadeIn让.screen淡入
    fadeIn(screenElement);
    
    // 如果需要淡出的话，比如绑定某个按钮点击事件
    // const closeBtn = document.querySelector('.close-btn');
    // closeBtn.addEventListener('click', () => fadeOut(screenElement));
  });
})();

这样调整后，你的.screen元素就能像jQuery的fadeIn/fadeOut那样平滑过渡啦！如果想要调整过渡的缓动效果，直接修改CSS里transition的ease参数就行（比如改成linear线性过渡，或者ease-in-out先慢后快再慢）。

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