3

Здравствуйте! Нужна помощь знающих людей, мои знания JS близятся к нулю, я уже просто сломал себе всю голову)

Суть проблемы такая:

Есть два блока (div), один из них изначально скрыт за границами экрана.

При нажатии на кнопку, видимый блок улетает в правую сторону за экран, а скрытый вылетает слева на его место.

С самой анимацией проблем нет и даже удаётся запускать её по клику на кнопку, но только один раз, повторное нажатие не срабатывает (т.е. нужно перезапускать анимацию каждый раз).

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

Для наглядности ТУТ можно посмотреть достигнутый мной результат. Блок "Заполните заявку", чуть ниже середины страницы, кнопка справа в этом блоке. Вот код который я использовал:

HTML:

<div class="zakaz-form switch-form">Содержимое 1-го блока + 1-я кнопка</div>
<div class="cons-form switch-form">Содержимое 2-го блока + 2-я кнопка</div>

Анимация CSS:

.zakaz-form{
  animation: switch-zakaz forwards 3s;
  -webkit-animation-play-state:paused;
  animation-play-state:paused;
}
@keyframes switch-zakaz {
  0% {
    opacity: 1;
    left: 0;
  }
  20% {
    opacity: 1;
    left: 0;
  }
  100% {
    opacity: 0;
    left: 95%;
  }
}

.cons-form{
  animation: switch-cons forwards 3s;
  -webkit-animation-play-state:paused;
  animation-play-state:paused;
}
@keyframes switch-cons {
  0% {
    opacity: 0;
    left: -1000px;
  }
  80% {
    opacity: 1;
    left: calc(50% - 275px);
  }
  100% {
    opacity: 1;
    left: calc(50% - 275px);
  }
}

.start-anim {
    -webkit-animation-play-state:running;
    animation-play-state:running;
}

JS - старт анимации по клику на кнопку:

jQuery(document).ready(function($){
        $(function(){
            $('.cons-button').click(function(){
                $('.switch-form').toggleClass('start-anim');
            });
        });
});

Заранее благодарю за любую помощь!

UPD: [Пример неполного решения] - при нажатии на кнопку "Показать первый блок", нужно чтобы анимация запускалась в обратную сторону.

2
  • Оформи код нормально, что бы его тут посмотреть можно было, а не на твоем сайте, тогда помогут
    – lazyproger
    17 янв 2018 в 4:29
  • И зачем я так всё усложнил) добавил, спасибо за совет
    – REDiRECT
    17 янв 2018 в 5:07

1 ответ 1

3

Не стоит анимацию использовать там где можно обойтись простой трансформацией.

jQuery(document).ready(function($) {
  $(function() {
    $('.btn').click(function() {
      $('.switch-form').toggleClass('start-anim');

    });
  });
});
button {
  display: block;
  margin: 80px auto;
}

.zakaz-form {
  opacity: 0;
  position: absolute;
  top: 0;
  left: calc(50% - 100px);
  width: 200px;
  height: 200px;
  background: #49c766;
  transform: translateX(-250%);
  transition: all .5s;
}

.cons-form {
  opacity: 0;
  position: absolute;
  top: 0;
  left: calc(50% - 100px);
  width: 200px;
  height: 200px;
  background: #f03e53;
  transform: translateX(250%);
  transition: all .5s;
}

.start-anim {
  opacity: 1;
  transform: translateX(0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="zakaz-form switch-form"><button class="btn cons-button">Показать второй блок</button></div>
<div class="cons-form switch-form start-anim"><button class="btn zakaz-button">Показать первый блок</button></div>

7
  • У меня были подозрения, что я пошёл совершенно не верным путём) Огромное Вам спасибо, что указали на ошибку и подсказали решение, это то что нужно!
    – REDiRECT
    17 янв 2018 в 8:20
  • А может Вы сможете помочь мне ещё раз? Нужна ещё небольшая доработка, я в js ну совсем дерево) Есть ещё две кнопки, совершенно в другом месте. Можно сделать так, чтобы при нажатии на одну появлялся первый из этих блоков, а при нажатии на вторую - второй, но при этом повторные нажатия не меняли их местами?) при этом нужно совместить всё с Вашим решением
    – REDiRECT
    17 янв 2018 в 8:22
  • Рад был помочь... Тогда прими ответ... Это серая галочка слева от ответа
    – Air
    17 янв 2018 в 8:22
  • минутку))))))))...
    – Air
    17 янв 2018 в 8:24
  • Надеюсь объяснил доступно) проще - сверху страницы две якорные ссылки кнопками, каждая из которых переносит на этот блок) но нужно чтобы выводился соответствующий
    – REDiRECT
    17 янв 2018 в 8:25

Ваш ответ

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

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