1

jQuery как добавить событие remove после CSS анимации? При клике на элемент происходит анимация и после неё удаление из DOM Скрипт запускает @keyframes анимацию:

$('#base').on('click', '.block', function(e) {
e.preventDefault;
$(this).toggleClass('block_animation');
});

как добавить:

$(this).remove();

$('#base').on('click', '.block', function(e) {
  e.preventDefault;
  $(this).toggleClass('block_animation');
});
.block {
  padding: 100px;
  position: relative;
  display: inline-block;
  background-color: #da22149c;
  cursor: pointer;
  animation-duration: 0.5s;
}

.block_animation {
  animation-name: styles;
}

@keyframes styles {
  0% {
    opacity: 1;
    left: 0;
  }
  100% {
    opacity: 0;
    left: 100;
  }
}
<head>
  <meta charset="utf-8">
  <title>blocks</title>
</head>

<body bgcolor="#FFEFD5">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <div id="base">
    <div class="block">
    </div>
    <div class="block">
    </div>
    <div class="block">
    </div>
  </div>
</body>

0

2 ответа 2

1

Т.к. продолжительность анимации у вас 0,5 сек, то необходимо использовать таймаут на это время. Так же хорошей практикой будет инкапсуляция продолжительности анимации

$('#base').on('click', '.block', function(e) {
      e.preventDefault();
      let dur = 0.5;
      $(this).css('animation-duration', dur + 's');
      $(this).toggleClass('block_animation');
      setTimeout(() => $(this).remove(), dur * 1000);
    });
.block {
      padding: 100px;
      position: relative;
      display: inline-block;
      background-color: #da22149c;
      cursor: pointer;
     
    }

    .block_animation {
      animation-name: styles;
    }

    @keyframes styles {
      0% {
        opacity: 1;
        left: 0;
      }
      100% {
        opacity: 0;
        left: 100;
      }
    }
<head>
      <meta charset="utf-8">
      <title>blocks</title>
    </head>

    <body bgcolor="#FFEFD5">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <div id="base">
        <div class="block">
        </div>
        <div class="block">
        </div>
        <div class="block">
        </div>
      </div>
    </body>

1

https://developer.mozilla.org/ru/docs/Web/API/GlobalEventHandlers/onanimationend

$('#base').on('click', '.block', function(e) {
  e.preventDefault();
  $(this).toggleClass('block_animation');

  this.addEventListener('animationEnd', function(e) {
     this.remove();
  });
});
1
  • 1
    Это отличный функционал от Mozilla, но имеющий слабую поддержку другими браузерами.
    – NoSkill
    25 фев 2021 в 9:20

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.