Блог

У меня есть два меню, которые я хочу поменять местами с помощью переключателя. Поменять их местами не проблема, но я не могу правильно анимировать.

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

Я создал codepen с тем, что я пробовал до сих пор:

https://codepen.io/twan2020/pen/OJRXMLo

Как я могу создать анимацию подкачки, которая выглядит плавно? Подобно перетасовке колоды карт, старое меню анимируется с помощью bounceout, а новое меню одновременно анимируется с помощью bouncein.

Мой HTML:

 <div class="animate__animated" id="menu1">
  This is menu 1
</div>

<div class="animate__animated" id="menu2">
  This is menu 2
</div>

<div class="toggle-switch-container">
  <div class="toggle-switch switch-vertical" id="togglemenu">
    <input id="toggle-a" type="radio" name="switch" checked="checked" value="1" />
    <label for="toggle-a">Menu 1</label>
    <input id="toggle-b" type="radio" name="switch" value="2" />
    <label for="toggle-b">Menu 2</label>
    <span class="toggle-outside">
      <span class="toggle-inside"></span>
    </span>
  </div>
</div>
 

jQuery:

 $('.toggle-switch input').on('change', function() {
    if ($('input[name=switch]:checked', '.toggle-switch').val() == 1) {
        $("#menu1").addClass('animate__bounceInDown');
        $("#menu2").addClass('animate__bounceOutDown');
        $("#menu2").css('display', 'none');
        $("#menu1").css('display', 'flex');
        $("#menu1").removeClass('animate__bounceOutUp');
        $("#menu2").removeClass('animate__bounceInDown');
        console.log('1');
    } else if ($('input[name=switch]:checked', '.toggle-switch').val() == 2) {
        $("#menu1").addClass('animate__bounceOutUp');
        $("#menu2").addClass('animate__bounceInDown');
        $("#menu1").css('display', 'none');
        $("#menu2").css('display', 'flex');
        $("#menu1").removeClass('animate__bounceInDown');
        $("#menu2").removeClass('animate__bounceOutDown');
        console.log('2');
    }
});
 

CSS:

 #menu2{
  display:none;
}
 

Просто удалите $("#menu2").css('display', 'none'); и $("#menu1").css('display', 'none'); из вашего js-кода.

И чтобы сделать размер контейнера одинаковым, вы можете переключить высоту «скрытого» меню следующим образом:

   $("#menu2").css('height', '0px');
  $("#menu1").css('height', 'auto');
 

и это:

   $("#menu1").css('height', '0px');
  $("#menu2").css('height', 'auto');