Question

我正在研究小型角度应用程序，并且在某些时候我需要选择一些将要删除的行，因此我决定在选择它们时将它们放在类上，我这样做是这样的：

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

Answer 2

通过添加以下内容将动画设置为无限迭代：

.animated.shaking  
{ 
  animation-iteration-count: infinite;
}

此外，使用类列表add（）和remove（）不支持空格，因此可能会将您的脚本更改为：

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

添加类后如何保持HTML元素的晃动/移动

2 个答案: