页面加载div先淡入后消失，侧边栏打开无法触发元素显示问题排查

开发带列表项的弹出式侧边栏时，预先将.inputItem元素的opacity属性设为0，预期侧边栏打开时将opacity切换为1实现元素淡入效果，实际出现两处异常：

• 页面加载阶段元素会先淡入，随后受transition过渡效果影响自动淡出，即便初始明确设置opacity: 0，依然会触发初始加载时的淡入动画；移除元素的transition属性后，加载时先显示再消失的异常就会消失
• 触发侧边栏打开逻辑时，元素无法正常回显

提问者推测：页面加载时元素先以可见状态完成首次渲染，等opacity:0的样式规则生效后，受transition属性影响，从可见状态缓慢过渡到透明状态，最终导致加载阶段的异常淡出，同时侧边栏打开逻辑存在问题，触发时元素无法正常显示。

样式代码 #

.inputItem {
  opacity: 0;
  margin: 2vh, 0;
  position: relative;
  height: 40px;
  width: 100%;
  -webkit-transform: translateY(-20px);
  -moz-transform: translateY(-20px);
  -ms-transform: translateY(-20px);
  -o-transform: translateY(-20px);
  transform: translateY(-20px);
}

交互逻辑代码 #

function menuOpen() {
  if(!toggled){
    document.getElementsByClassName('inputItem').style = 'opacity: 1;'
    toggled = true
  } else {
    document.getElementsByClassName('inputItem').style = ''
    toggled = false
  }
}

页面结构代码 #

<div id='sideMenu' class='sideMenu'>
   <form id='inputWrapper' class=inputWrapper>
      <div id='inputItem' class='inputItem'>
         <input id='x1' type='text' name=''>
         <label class='plntPropInptTxt'>X</label>
         <span></span>
      </div>
   </form>
</div>

• JS逻辑错误：document.getElementsByClassName('inputItem')返回的是HTML元素集合，不是单个DOM元素，直接对集合设置style属性完全无效，这是点击侧边栏开关元素无响应的核心原因。如果要获取对应元素，可使用document.querySelector('.inputItem')获取第一个匹配元素，或遍历集合给每个匹配元素设置样式，也可直接通过唯一id获取元素：document.getElementById('inputItem')。
• 初始加载触发异常过渡：浏览器解析HTML和CSS的过程中，会先完成元素的初始渲染（默认opacity为1），之后再应用opacity:0的样式规则，如果提前给元素设置了transition属性，这两次样式差异会被捕捉，触发从opacity 1到0的淡出动画，表现为页面加载时元素先闪现再消失。
  对应解决方案：
  • 初始隐藏状态下给元素搭配设置visibility: hidden，等页面首次渲染完成（可监听DOMContentLoaded事件）后，再移除visibility限制，仅保留opacity和transform的过渡逻辑
  • 页面初始加载时给根节点或body添加预加载类，将该类下所有元素的过渡属性设为transition: none !important;，等页面加载完成后移除该类，即可阻断初始渲染阶段的过渡动画触发
• CSS语法错误：代码中margin: 2vh, 0;的逗号属于无效语法，CSS属性多参数之间用空格分隔，正确写法为margin: 2vh 0;

修复后参考代码 #

修复后CSS

.inputItem {
  opacity: 0;
  /* 修正margin语法错误 */
  margin: 2vh 0;
  position: relative;
  height: 40px;
  width: 100%;
  transform: translateY(-20px);
  /* 初始不设置transition，等DOM加载完成后通过JS添加，避免初始动画 */
}

修复后JS

let toggled = false;
document.addEventListener('DOMContentLoaded', () => {
  const inputItems = document.querySelectorAll('.inputItem');
  // DOM加载完成后再给元素添加过渡效果
  inputItems.forEach(item => {
    item.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
  })

  window.menuOpen = function() {
    if(!toggled){
      inputItems.forEach(item => {
        item.style.opacity = '1';
        item.style.transform = 'translateY(0)';
      })
      toggled = true
    } else {
      inputItems.forEach(item => {
        item.style.opacity = '0';
        item.style.transform = 'translateY(-20px)';
      })
      toggled = false
    }
  }
})

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