Как сохранить дрожание / перемещение HTML-элемента после добавления класса - PullRequest
Новая
       6

Как сохранить дрожание / перемещение HTML-элемента после добавления класса

0 голосов
/ 18 октября 2018

Я работаю над небольшим угловым приложением, и в какой-то момент мне нужно выбрать некоторые из моих строк, которые будут удалены, поэтому я решил добавить к ним класс, когда они выбраны, и я сделал это следующим образом:

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>

Как вы можете видеть, когда флажок установлен, я назову меня thod toggleMerge($event):

2.) .Ts file 

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

И это работает, но как я могу заставить его трястись, пока он выбран?

Спасибо, ребята, Ура!

Ответы [ 2 ]

0 голосов
/ 18 октября 2018

Установите анимацию на бесконечную итерацию, добавив: 

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

также, используя classlist add () и remove () не поддерживает пробелы, поэтому может изменить ваш скрипт на: 

toggleMerge(event, id) {
  if (event.target.checked) {
     $("#" + id).add('animated');
     $("#" + id).add('shake');
  }
  else {
     $("#" + id).remove('animated');
     $("#" + id).remove('shake');
  }
}
0 голосов
/ 18 октября 2018

Добавьте в свой CSS это: 

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