css - Angular :突出显示表格行上的动画

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 bool 值变为 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;
  }
}

这会添加“突出显示”动画。

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

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

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

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

Answer 1

这是因为你在fade-out时将background-color设置为transparent，你可以简单地使用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>