如何让CSS Transition仅作用于opacity属性，其他属性默认即时变化？

你只需要把.div的transition属性从全局过渡改成仅针对opacity属性，就能实现你要的效果——只有透明度变化时缓慢过渡，其他属性（比如随屏幕尺寸变化的宽高）保持即时更新。

修改后的完整代码： #

<script>
function f1(x) { x.classList.toggle('fade'); }
</script>
<style>
.div { 
  width: 20vw; 
  height: 20vh; 
  background-color: #e50; 
  opacity: 1; 
  /* 只对opacity应用1秒过渡，其他属性无过渡 */
  transition: opacity 1000ms; 
}
.fade { opacity: 0; }
</style>
<div class='div' onmouseover="f1(this)" onmouseout="f1(this)"> </div>

原理说明： #

• 原来的transition: 1000ms是简写形式，等价于transition: all 1000ms，意味着所有CSS属性的变化都会触发1秒过渡，所以屏幕尺寸变化时，vw/vh对应的宽高也会跟着过渡。
• 改成transition: opacity 1000ms后，只有opacity属性的变化会应用1秒过渡效果，其他属性（width、height等）的变化会立即生效，完全符合你的需求。

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