1

Как сделать, чтобы при нажатии по блоку анимация выполнялась в одну сторону, а при нажатии на абзац — в другую сторону (в обратном порядке, как переход)?

$(document).ready(function() {
  $('div').click(function() {
    $('div').toggleClass('a1').removeClass('a2');
  });
  $('p').click(function() {
    $('div').toggleClass('a2').removeClass('a1');
  });
});
div {
  width: 200px;
  height: 200px;
  background: black;
  position: relative;
}
.a1 {
  animation: vras 3s forwards;
}
.a2 {
  animation: vras 3s alternate-reverse forwards;
}
@keyframes vras {
  from {
    left: 0;
  }
  33% {
    left: 85%;
  }
  66% {
    left: 0;
  }
  to {
    left: 500px;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div></div>
<p>123</p>

6
  • При клике на p чёрный блок должен плавно двигаться так же в обратном направлении?
    – Yuri
    9 янв 2017 в 22:10
  • @Yuri Да, именно над этим тружусь.
    – PeGaS
    9 янв 2017 в 22:12
  • Каких переходов?
    – Yuri
    9 янв 2017 в 22:12
  • @Yuri без переходов в смысле без применения transition
    – PeGaS
    9 янв 2017 в 22:14
  • PeGaS, я попробую найти ответ на эту тайну :)
    – Yuri
    9 янв 2017 в 22:29

1 ответ 1

4

Добавьте вторую анимацию с обратным движением. Я не знаю точно почему, но нельзя применять одну анимацию туда и обратно к одному элементу

$(document).ready(function(){
   $('div').click(function(){
      if($(this).hasClass('a1')){
        $(this).addClass('a2').removeClass('a1');
      }else{
        $(this).addClass('a1').removeClass('a2');
      };
   });
});
div {
   width: 200px;
   height: 200px;
   background: black;
   position: relative;
}

.a1 {
   animation: vras1 3s forwards; 
}

.a2 {
   animation: vras2 3s forwards;
}

@keyframes vras1 {
   from {
      left: 0;
   }
   33% {
      left: 85%;
   }
   66% {
      left: 0;
   }
   to {
      left: 500px;
   }
}
@keyframes vras2 {
   from {
      left: 500px;
   }
   33% {
      left: 0;
   }
   66% {
      left: 85%;
   }
   to{
      left: 0;
   }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div></div>

6
  • Понятно спасибо
    – PeGaS
    9 янв 2017 в 22:29
  • Вот я к тому же выводу пришел. Разве что ещё замена toggleClass на addClass, по-моему, на пользу идёт коду в целом, но это уже смотря что автору надо.
    – Regent
    9 янв 2017 в 22:30
  • @Regent Вы правы, так более корректно. Вообще в идеале, если бы класс сменялся на a1 и a2 при нажатии только на блок. Я по незнанию поставил добавление класса a2 на абзац.
    – PeGaS
    10 янв 2017 в 9:27
  • @PeGaS, могу изменить ответ и показать, как сделать только на блок
    – Yuri
    10 янв 2017 в 13:26
  • @Yuri Да, хорошо
    – PeGaS
    10 янв 2017 в 13:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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