我们可以将CSS关键帧动画限制为范围

Question

我想知道是否可以将关键帧动画限制为基于类名的范围。好处是能够多次使用相同的动画名称而不会出现问题。我无法找到任何关于那个的信息..

如果不可能： 是否有处理命名冲突的最佳实践？

Answer 1

我曾经使用类似SCSS的东西为我的关键帧生成自动创建的名称。它们可能不具有描述性，但它们确保了唯一性。类似的东西：

b == 0

在此之后，只需使用代码中的函数：

$animation-id-count: 0 !global;

@function animation-id {

  $animation-id-count: $animation-id-count + 1;
  @return animation-id-#{$animation-id-count};

}

这样，如果您将其插入SCSS中的任何其他位置或移动它，它仍将匹配正确的动画，并且它会阻止命名空间以任何方式重叠。