JQuery применить переход на элементе по клику

Question

Я пытаюсь применить свой переход fade каждый раз, когда нажимаю кнопку.

Каков наилучший способ для достижения этой цели?

Так что вместо .addClass () и затем .removeClass () после его добавления представьте что-нибудьнапример .apply (), который просто применил бы класс один раз, чтобы он не «сохранил» класс.

Прямо сейчас у меня есть .toggleClass, который применяет переход только каждый второй щелчок (в основном как: addClass, removeClass, addClass и т. д.).Я могу подумать о том, чтобы сделать это по-другому, посмотрев, есть ли у него класс, а если нет, то удалите его и добавьте его снова, но это кажется настолько нелогичным и заставляет меня думать, что должен быть более простой и понятный способ.сделать это.

$("#btn").click(function() {
  $("#cat").toggleClass("fade");
})

@import url('https://fonts.googleapis.com/css?family=Yatra+One');

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #eee;
}

.generator {
  height: 400px;
  width: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

#cat {
  height: 300px;
  width: 400px;
  border-radius: 5px;
  transform: scale(1);
  opacity: 1;
}

.fade {
  animation: fade .5s linear forwards;
}

@keyframes fade {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

#btn {
  height: 90px;
  width: 400px;
  outline: none;
  border: none;
  border-radius: 5px;
  background-color: #4682B4;
  color: white;
  font-size: 1.75em;
  font-family: Yatra One;
  transition: background-color 0.1s ease-in-out;
}

#btn:hover {
  cursor: pointer;
  background-color: #508EC3;
}

#btn:active {
  background-color: #4293D8;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="generator">
    <img id="cat" src="https://i.imgur.com/RVQZ9UM.png" alt="cat" />
    <button id="btn">New cat</button>
  </div>
</div>

Answer 1

Использование toogleClass() здесь может быть не лучшим решением.Происходит следующее:

1. При запуске <img> не имеет .fade класса
2. . При нажатии кнопки класс добавляется, следовательно, запускается анимация ключевого кадра.
3. Но когда вы нажимаете снова, он удаляет класс
4. Так что вам нужно щелкнуть еще раз, чтобы перезапустить анимацию

Но сейчас я неесть лучший способ сделать это.И ответ Нандиты на самом деле такой же, с чуть большим количеством кода.

Ответ Али на самом деле лучший:

$("#btn").click(function() {
      $("#cat").addClass("fade");
})

$("#cat").bind('oanimationend animationend webkitAnimationEnd', function() { 
   $(this).removeClass("fade");
});

Прослушивание события анимации для удаления класса .fade, когдаанимация завершена.

Answer 2

Вы можете удалить класс fade в конце анимации, прослушивая события анимации:

$("#cat").bind('oanimationend animationend webkitAnimationEnd', function() { 
   $(this).removeClass("fade");
});

В этом случае вы можете использовать addClass вместо toggleClass.