Angular：表行上的Hightlight动画

Question

情况

我有一张包含设备及其状态的表格。当我单击特定按钮时，具有脱机状态的行需要突出显示几秒钟，然后返回到正常状态。

到目前为止我有什么

<tr id="deviceRow" class="user-item" *ngFor="let device of group.devices" (click)="$event.stopPropagation()" [class.highlightOn]="this.offlineHighlight == true && device.onlineState == 'Offline'">

当我点击按钮时，offlineHighlight布尔值变为true，并添加了highlightOn类，即此类。

.highlightOn {
  background-color: rgb(255, 68, 65);
  -webkit-animation: fade-out 3s ease-out both;
  animation: fade-out 3s ease-out both;
}

@-webkit-keyframes fade-out {
  0% {
    background-color: rgba(255,51,47,1);
  }
  100% {
    background-color: transparent;
  }
}
@keyframes fade-out {
  0% {
    background-color: rgba(255,51,47,1);
  }
  100% {
    background-color: transparent;
  }
}

这增加了＆＃39;突出显示＆＃39;动画。

动画完成后，我再次在按钮代码中将offlineHighlught布尔值设置为false。

  showOfflineDevices() {
    this.offlineHighlight = true;
    this.tabIndex = 1;
    setTimeout(function(){
      this.offlineHighlight = false;
    }, 3000);
  }

在动画完成之前一切正常。标准表格行对于每个奇数偶数行具有不同的背景颜色。动画完成后，所有拥有highlightOn类的行都有白色背景颜色，如您所见。

TL：DR动画完成后，表格行的背景颜色需要恢复正常。偶数行现在也是白色的，需要是灰色的。

Answer 1

这是因为您在background-color上将transparent设置为fade-out，您可以像这样简单地使用transitions（只需添加和删除带有其他样式的类，不要覆盖fade-out）上的现有样式：

setInterval(() => {
  $(".color").addClass("selected");
  setTimeout(() => {
    $(".color").removeClass("selected")
  }, 2500);
}, 5000);

div {
  transition: background-color .5s ease;
}

div:nth-child(odd) {
  background-color: lightgray;
}

div:nth-child(even) {
  background-color: gray;
}

.selected {
  background-color: green !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>1</div>
<div class="color">2</div>
<div class="color">3</div>
<div>4</div>
<div>5</div>