为何JavaScript中元素transition过渡效果不生效？

你的过渡没触发是因为浏览器会把同一同步代码块内的样式修改批量处理——当你在点击事件里先设置transition，紧接着修改一堆样式时，浏览器会将这些操作合并成一次重绘，此时元素的初始状态直接变成修改后的状态，自然不会触发过渡动画。

另外要注意：position是离散属性，无法通过transition实现平滑过渡，只有width、height、top、left这类可计算的数值属性能产生过渡效果。

修复方案1：提前设置过渡属性（推荐） #

把transition提前设置在CSS里，或者页面初始化时用JS设置，不要等到点击时才添加：

方法A：用CSS设置过渡

#ingenieriaInd {
  transition: all 500ms ease-in-out;
}

方法B：页面初始化时用JS设置

// 页面加载完成后就设置过渡，不要放在点击事件内
ingenieriaInd.style.transition = 'all 500ms ease-in-out';

ingenieriaInd.addEventListener('click',(e)=>{
  // 这里只修改需要变化的样式
  ingenieriaInd.style.width = '90vw';
  ingenieriaInd.style.height = '80vh';
  ingenieriaInd.style.position = 'absolute';
  ingenieriaInd.style.justifyContent = 'flex-start';
  ingenieriaInd.style.top = '5vh';
  ingenieriaInd.style.left = '-15vw';
})

修复方案2：延迟样式修改到下一渲染帧 #

如果必须在点击时才添加过渡，可以用requestAnimationFrame把样式修改延迟到下一帧，让浏览器先处理过渡属性的设置，再执行样式变化：

ingenieriaInd.addEventListener('click',(e)=>{
  ingenieriaInd.style.transition = 'all 500ms ease-in-out';
  
  // 把样式修改放到下一渲染帧执行
  requestAnimationFrame(() => {
    ingenieriaInd.style.width = '90vw';
    ingenieriaInd.style.height = '80vh';
    ingenieriaInd.style.position = 'absolute';
    ingenieriaInd.style.justifyContent = 'flex-start';
    ingenieriaInd.style.top = '5vh';
    ingenieriaInd.style.left = '-15vw';
  });
})

内容的提问来源于stack exchange，提问作者Jeison Sang Wu Mitre