0

Есть div с классом .button. При нажатии на этот div срабатывает обраотчик событий в js и к класу .button прибавляется класс .showed у которого есть анимация:

JS:

button.classList.add('showed');

CSS:

   .button.showed{
      animation: anim1 .8s ease-out;
      animation-delay: .6s;
      animation-fill-mode: forwards;
   }

При повторном клике к этим двум классам прибавляется .reverse:

CSS:

.button.showed.reverse{
    animation-direction: reverse;
    animation-delay: unset;
    animation-fill-mode: unset;
}

@keyframes anim1{
    0{
        transform: translateX(0);
        opacity: 0;
        visibility: hidden;
    }

    100%{
        transform: translateX(195px);
        opacity: 1;
        visibility: visible;
    }
}

Проблема в том, чо при присваивании .reverse состояние элемента transform срабатывает, но без видимой анимации, т.е. срабатывает мгновенно.

2
  • если это вся анимация - то это можно сделать без keyframes и будет проще... 2 июн 2019 в 14:17
  • 2
    я не знаток стандарта в этом месте, но полагаю что анимация уже проиграна, поэтому сразу устанавливается последний кадр, так же с 99% уверенностью могу сказать что поможет установка обратной анимации с другим именем 2 июн 2019 в 14:19

1 ответ 1

1

Колхоз конечно.. Но работает)

$('.block').on('click', function(){
  const $this = $(this);
  if($this.hasClass('finish')) {
    $this.removeClass('finish').addClass('reverse');
    setTimeout(function() {
      $this.removeClass('reverse');
    },1000);
  } else {
    $this.addClass('start');
    setTimeout(function() {
      $this.removeClass('start').addClass('finish');
    },1000);
  }
});
.block {
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
  background: red;
  color: #fff;
}

.start {
  animation: Animate 1s linear forwards;
}

.finish {
  width: 200px;
  background: green;
  color: blue;
}

.reverse {
  animation: Animate 1s linear reverse forwards;
}

@keyframes Animate {
  to {
    width: 200px;
    background: green;
    color: blue;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="block">Click Me</div>

Если что пишите, попытаюсь объяснить.

1
  • Хотел конечно поменьше скрипта, но суть понял)
    – YavDen
    3 июн 2019 в 21:13

Ваш ответ

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

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