Question

想象一下以下HTML结构：

it('Print method should called', () => {
    let viewEditResourceService = fixture.debugElement.injector.get(ViewEditResourceService);
    spyOn(viewEditResourceService, 'getResourcebyId').and.returnValue(Observable.of(allocationModalCompObj.resDetails.data));
    component.message = 298;

    spyOn(window, 'open');
    spyOn(document, 'open');
    spyOn(document, 'write');
    spyOn(window, 'print');

    component.ngOnInit();
    component.print();
    expect(window.open).toHaveBeenCalled();
    expect(window.print).toHaveBeenCalled();
});

这些div代表具有此SASS的对象：

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

现在，我希望它们全部实现.myClass { position: absolute; animation: shake 5s infinite; animation-timing-function: linear; }动画，但是以不同的方式-第一div向左/向右移动，第二div向顶部/底部移动等-通常，所有它们都应具有相同的动画进行细微调整。
我到了用SASS的shake制作3种不同动画的地步，但这并不能解决我的问题，因为在编译后，所有具有相同类的元素都被赋予了相同的动画。
示例：我正在生成3个不同的@for，shake-1，shake-2动画，即使我制作了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

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

2 个答案: