如何在组件加载时通过keyframes实现:hover及:hover:after动画

我们可以将:hover状态的过渡效果转化为关键帧动画，让元素添加active类时自动触发，具体修改如下：

修改后的SCSS代码 #

.module .active {
  display: inline-block;
  position: relative;
  color: var(--text-color-dark);
  // 可选：文字入场动画，可根据需求调整或删除
  animation: loadInText ease 3s forwards;
}

// 文字入场动画（示例）
@keyframes loadInText {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.module .active:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--primary-color);
  // 初始状态保持与原hover前一致
  transform: scaleX(0);
  transform-origin: bottom right;
  // 添加active类时自动触发下划线展开动画
  animation: underlineExpand 0.25s ease-out forwards;
}

// 模拟hover时的下划线展开动画
@keyframes underlineExpand {
  0% {
    transform: scaleX(0);
    transform-origin: bottom right;
  }
  100% {
    transform: scaleX(1);
    transform-origin: bottom left;
  }
}

// 可选：保留hover交互效果（如需移除可删除此部分）
.module .active:hover:after {
  animation: underlineReverse 0.25s ease-out forwards;
}

@keyframes underlineReverse {
  0% {
    transform: scaleX(1);
    transform-origin: bottom left;
  }
  100% {
    transform: scaleX(0);
    transform-origin: bottom right;
  }
}

关键改动说明 #

1. 替换过渡为动画触发：把:after元素的transition属性换成animation，元素添加active类时会自动执行underlineExpand关键帧动画
2. 复刻hover效果：underlineExpand动画完全还原了原:hover:after的过渡逻辑——下划线从右下原点缩放至100%宽度，同时切换原点到左下
3. 可选交互保留：如果需要保留鼠标hover时的反向收起效果，可保留underlineReverse动画及对应的:hover样式；不需要的话直接删除此部分即可
4. 文字动画（可选）：补充了文字入场动画示例，可根据需求调整参数或直接删除

其他说明 #

你原有的JS视口检测逻辑无需修改，当元素进入视口时，active类会自动触发上述动画效果。

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