javascript - 添加类后如何保持 HTML 元素摇晃/移动

Question

我正在开发小型 Angular 应用程序，在某些时候我需要选择一些将被删除的行，所以我决定在选择它们时对它们进行分类，我是这样做的:

1.) HTML

<div id={{product.id}} *ngFor="let product of products; let i = index;" class="panel panel-default index-panel">
    <div class="order-checkbox">
                <div class="checkbox">
                  <label style="font-size: 2em">
                    <input type="checkbox" value="" (change)="toggleMerge($event, product.id)" [(ngModel)]="product.isOrderChecked">
                    <span class="cr"><i class="cr-icon fa fa-check"></i></span>
                  </label>
                </div>
              </div>
</div>

如您所见，当复选框被选中时，我将调用一个方法 toggleMerge($event) :

2.) .ts 文件

toggleMerge(event, id) {
    if (event.target.checked) {
      $("#" + id).addClass('animated shake');
    }
    else {
      $("#" + id).removeClass('animated shake');
    }
  }

这是有效的，但我如何才能在它被选中时让它一直摇晃呢？

谢谢大家干杯

Answer 1

在您的 CSS 中，添加以下内容:

.animated.shake {
    animation: [animation name](shake?) [animation duration](1s?) /*IMPORTANT PART:*/ infinite;
}