Chrome浏览器中Hover状态下Transition过渡效果失效问题

嘿，我一眼就揪出问题所在啦！你的过渡动画没正常工作，核心原因是把transition属性写在了:hover:before的CSS规则里——这就相当于只有鼠标悬停时，才给伪元素加上过渡能力，但它的初始状态完全没定义那些要过渡的属性（比如opacity、transform、宽高），浏览器根本没法计算从“无”到“有”的平滑过渡，只能直接跳变。

正确的修复思路： #

• 先给[data-title]:before定义初始状态，把所有要过渡的属性（比如透明值、初始位置、宽高等）都明确写在这里
• 把transition属性也放在这个基础规则里，让伪元素从一开始就具备过渡能力
• 只在:hover:before里修改需要变化的属性值

修正后的完整代码示例： #

[data-title] {
  position: relative;
  margin: 100px;
}
/* 伪元素初始状态 + 过渡规则 */
[data-title]:before {
  content: '';
  position: absolute;
  z-index: 10;
  box-sizing: border-box;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  /* 初始状态：透明、位置偏移、宽高设为初始值 */
  opacity: 0;
  transform: translate(-50%, -10px); /* 初始位置可稍向上，hover时移到目标点 */
  width: 0;
  height: 0;
  left: 50%;
  top: 100%;
  margin-top: 0;
  pointer-events: none;
  /* 过渡属性放在这里才对！ */
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}
/* hover时只修改需要变化的属性 */
[data-title]:hover:before {
  opacity: 1;
  transform: translate(-50%, 0);
  width: 18px;
  height: 6px;
  pointer-events: auto;
}

为啥这样就能生效？ #

过渡动画的本质是浏览器计算元素属性从初始值到目标值的中间状态，必须确保初始状态就存在这些属性的明确定义。如果只在hover状态才添加过渡和属性，浏览器会认为初始状态下这些属性不存在，直接触发属性的瞬间变化，而不是平滑过渡。

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