Sass混合宏异常：调用任一动画类均应用最后一个类的样式

问题根源 #

你写的混合宏里，每次调用都会生成同名的fadeIn关键帧。CSS的规则是：同名的@keyframes会被最后定义的那一个完全覆盖。所以不管你调用.animate-up还是.animate-down，最终生效的都是最后一个.animate-right生成的关键帧，自然所有元素都只会有向右的动画效果。

修复方案 #

把关键帧改成动态命名，让每个方向对应唯一的关键帧名称，避免冲突。同时调整混合宏里的animation属性，匹配对应的关键帧。

修改后的代码如下：

$distance: 30px
  
@mixin animate($delay: 0s, $direction: "up")
  // 用方向拼接唯一的关键帧名称
  $animation-name: fadeIn-#{$direction}
  animation: #{$animation-name} 1s
  animation-delay: $delay
  animation-fill-mode: both
  
  // 定义对应方向的唯一关键帧
  @keyframes #{$animation-name}
    from
      opacity: 0
      @if $direction == "up"
        transform: translateY($distance)
      
      @else if $direction == "down"
        transform: translateY(-$distance)
      
      @else if $direction == "left"
        transform: translateX($distance)
      
      @else if $direction == "right"
        transform: translateX(-$distance)
    to
      opacity: 1
      transform: translateY(0) translateX(0)

.animate-up
  @include animate(0s, "up")

.animate-down
  @include animate(0s, 'down')

.animate-left
  @include animate(0s, 'left')

.animate-right
  @include animate(0s, 'right')

补充说明 #

这样修改后，每个类对应的关键帧名称会变成fadeIn-up、fadeIn-down等，彼此独立不会覆盖。编译后的CSS里，每个方向的动画都有自己专属的关键帧，就能正常显示对应方向的动画效果了。

另外也可以把关键帧移到混合宏外部，通过传参控制transform的值，但动态命名关键帧是最直接适配你原有代码结构的方案。

内容的提问来源于stack exchange，提问作者jean d'arme