实现鼠标移出时带自定义transition效果的导航栏悬停动效

问题原因 #

你无法实现鼠标移出后过渡效果的核心问题是过渡延迟规则只在:hover状态下生效，鼠标离开后延迟规则直接消失，导致文字样式立刻复位，和背景滑动的时序完全不匹配，和目标效果逻辑相反。

修复后的完整SCSS代码 #

.nav-item {
  display: flex;
  flex-direction: row;
  transform: skewX(-25deg);
  border-right: 1px solid #9e8451;
  margin: 0 0.5rem;
  position: relative; /* 缺失的关键属性：伪元素绝对定位需要父级相对定位 */
  overflow: hidden; /* 防止伪元素滑入前在外部异常显示 */

  .nav-link {
    font-weight: 500;
    color: #c09f62 !important;
    font-size: 1.15rem;
    text-transform: uppercase;
    transform: skewX(25deg);
    padding: 1.25rem 1.85rem !important;
    /* 默认状态过渡规则：等背景滑完1s再复位文字样式 */
    transition: 0s color, 0s text-shadow;
    transition-delay: 1s;
  }

  &::after {
    content: "";
    width: 100%;
    background: #312612;
    transition: all 1s linear;
    position: absolute;
    right: -100%; /* 调整为-100%即可，冗余的-200%会增加无效滑动距离 */
    top: 0;
    height: 100%;
    display: block;
    z-index: -1;
  }

  &.active,
  &:hover {
    font-weight: bold;

    &::after {
      right: 0;
    }

    .nav-link {
      color: #f8d696 !important;
      text-shadow: 0 0 15px #f2c87b;
      /* 悬停状态过渡规则：背景滑完1s加少量冗余后再切换文字样式 */
      transition-delay: 1.15s;
      font-weight: bold;
    }
  }
}

效果说明 #

修改后无需额外JS代码，纯CSS即可实现和目标GIF完全一致的交互：

• 鼠标悬停时：斜切背景先从右侧滑入，滑动完成后文字变亮并触发发光效果
• 鼠标移出时：斜切背景先向右侧滑出，滑动完成后文字恢复初始样式

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