将不同的动画应用于具有SASS类的元素

Question

想象一下以下HTML结构：

<div class="myClass" />
<div class="myClass" />
<div class="myClass" />

那些div代表一个对象，它具有这样的SASS：

.myClass {
  position: absolute;
  animation: shake 5s infinite;
  animation-timing-function: linear;
}

现在，我希望它们都能实现shake动画，但是以一种不同的方式--首先，div向左/右移动，其次移动上/下等--通常它们都应该有相同的动画，只需稍作调整。

我已经到了使用SASS的@for制作3种不同动画的地步，但这并不能解决我的问题，因为编译后，所有具有相同类的元素都会得到相同的动画。

示例:我正在生成3种不同的shake-1、shake-2、shake-3动画，即使我制作了SASS函数，其中只有一个应用于所有具有相同类的html元素。

对如何处理这件事有什么想法吗？

Answer 1

你可以这样做..。

<div class="myClass" />
<div class="myClass" />
<div class="myClass" />

.myClass:first-child {
  position: absolute;
  animation: shake-1 5s infinite;
  animation-timing-function: linear;
}
.myClass:nth-child(2) {
  position: absolute;
  animation: shake-2 5s infinite;
  animation-timing-function: linear;
}
.myClass:nth-child(3) {
  position: absolute;
  animation: shake-3 5s infinite;
  animation-timing-function: linear;
}

Answer 2

最好的办法是在每个div中增加一个额外的类。

所以就像：

<div class="myClass shake-lr"></div>
<div class="myClass shake-tb"></div>
<div class="myClass shake-dia"></div>

然后在css/sass中：

.myClass
  position: absolute
  animation-timing-function: linear
.shake-lr 
  animation: shake-1 5s infinite
.shake-tb
  animation: shake-2 5s infinite
// ... and so on