Использование jQuery для запуска анимации дрожания CSS работает каждый ДРУГОЙ раз ... почему?

Question

У меня есть довольно простая скрипка: http://jsfiddle.net/7aotzqmL/2/, которая должна потрясти div с CSS-анимацией при нажатии на ссылку. Это работает, но только через раз (каждый второй раз). Я в тупике - кто-нибудь может помочь?

В других ответах, на которые я смотрел, упоминалось, что при использовании onmouseover вам также необходимо прикрепить onmouseout ... но это всего лишь щелчок, поэтому я не уверен, что это актуально. Я просто хочу, чтобы div сотрясался на каждом клике, а не на каждом другом.

jsFiddle: https://jsfiddle.net/7aotzqmL/2/

Код CSS:

$(function() {
  $('a').click(function(ev) {
    $('div').toggleClass('shaker');
    ev.preventDefault();
  });
});

div.shaker {
  animation: shake 0.3s;
  /* When the animation is finished, start again */
  animation-iteration-count: 1; //single shake 
}

@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">asd</a>
<div>shake</div>

Answer 1

Попробуйте это будет работать

$(function(){
    $('a').click(function(ev){

       $('div').addClass('shaker'); 

       setTimeout(function(){

       $('div').removeClass('shaker'); 
       },300);
        ev.preventDefault();
    });
});

Ниже код удаляет класс по четному щелчку, и ваша анимация работает над добавлением класса

$('div').toggleClass('shaker');

в приведенном выше решении, div-класс будет удален после анимации 0.3secs, он будет добавлять класс 'shaker' при каждом нажатии, и анимация будет происходить

Answer 2

Вы переключаете класс, поэтому первый щелчок добавляет его, а второй удаляет его.Вместо этого вы можете добавить класс по щелчку и настроить прослушиватель событий одноразового использования для прослушивания конца анимации, а затем удалить класс.

$(function() {
  const div = $('.container')
  $('a').click(function(ev) {
    div.addClass('shaker')
    div.one('animationend', () => {
      div.removeClass('shaker')
    })
    ev.preventDefault();
  });

});

.container {
  opacity: 1;
  width: 100px;
  height: 100px;
  background: red;
}

.container.shaker {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.3s;
  /* When the animation is finished, start again */
  animation-iteration-count: 1; //single shake 
}

@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="#">asd</a>
<div class="container"></div>

Answer 3

$(function(){
$('a').click(function(ev){
  $('div').addClass('shaker'); 
   setTimeout(()=>{
   $('div').removeClass('shaker');
   },300)
    ev.preventDefault();
});
});

Используйте вышеуказанный код.Вы удаляли класс shaker .

Answer 4

Ну, например, вы переключаете класс. поэтому один щелчок означает «добавить», следующий - «удалить». Кроме того, «предотвращение ошибки» должно появляться первым, чтобы предотвратить поведение по умолчанию тега привязки, прежде чем пытаться добавить или удалить классы.

    $(function(){
          $('a').click(function(ev){
              ev.preventDefault();
              $('div').addClass('shaker'); 
              setTimeout(()=> {
                  $('div').removeClass('shaker');
              },300)
          });
      });