Angular：突出显示表格行上的动画答案

【问题标题】：Angular: Hightlight animation on table rowsAngular：突出显示表格行上的动画
【发布时间】：2018-09-19 00:25:53
【问题描述】：

情况

我有一张包含设备及其状态的表格。当我单击特定按钮时，处于脱机状态的行需要高亮显示几秒钟，然后恢复正常。

到目前为止我所拥有的

<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;
  }
}

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

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

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

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

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

【问题讨论】：

我无权访问图片（公司代理），您能发一个minimal reproducible example 吗？（顺便说一句，感谢您的 TL；DR，这应该是发布新问题的要求）
@trichetriche 很抱歉，但我认为我不能让它变得更小。该按钮调用将布尔值设置为 true 的 showOfflineDevices() 函数。然后它将 highlightOn 类添加到动画 3 秒的行。然后按钮函数中的计时器将布尔值设置回false。
你说得对，但它更多的是关于可验证的部分。你知道，我们可以玩什么？
@trichetriche Uhm 我不确定，如果你真的需要，我会尝试，但这是我第一次这样做，所以不知道需要多长时间。跨度>
好吧，我不是那个有问题的人：P 你可以使用 stackblitz，如果你按照 angular 给出的风格指南，它应该需要大约 10 分钟。但我看到你有答案，所以不要打扰！

标签： css angular typescript

【解决方案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>

【讨论】：

我正在研究它，有什么问题会反馈给我......或者它可能只是第一次工作哈哈。