CSS border过渡动画不生效 SCSS实现边框过渡方案咨询

• 缺少过渡基准状态：你仅在:hover状态下定义了border，元素默认状态下border-style为none，属于无法插值计算的离散属性，浏览器不能在「无边框」和「有边框」之间生成平滑过渡的中间帧，只会直接跳变。
• 过渡属性位置错误：transition写在了:hover选择器内部，仅当鼠标悬停在元素上时过渡规则才生效，鼠标移出时规则失效，会瞬间恢复初始状态，移出过程无动画。
• 易引发布局跳动：hover时直接新增1px边框会改变元素盒模型尺寸，挤压周边元素位置，视觉上会出现突兀偏移。

在元素默认状态下提前设置和hover状态同宽度、同线型、颜色透明的边框，给浏览器提供可过渡的属性基准；将transition写在元素默认样式中，保证悬停、移出两个方向都有动画效果；配合box-sizing: border-box让边框宽度计入元素总尺寸，避免布局偏移。

对应SCSS代码如下：

.target {
  display: flex;
  box-sizing: border-box;
  // 初始状态预设透明边框，和hover状态的边框宽度、线型保持一致
  border: 1px solid transparent;
  // 过渡规则写在默认状态，需要阴影动画可以同时添加box-shadow的过渡
  transition: border 1s ease, box-shadow 1s ease;

  &:hover {
    // 仅修改边框颜色，不要改动边框宽度、线型属性
    border-color: rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
  }
}

如果不希望边框占据布局空间，可以用不影响盒模型尺寸的outline属性实现，效果一致：

.target {
  display: flex;
  outline: 1px solid transparent;
  transition: outline 1s ease, box-shadow 1s ease;

  &:hover {
    outline-color: rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
  }
}

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