Javascript 如何使用animate.css动画平滑地交换两个元素（跳出旧元素，跳入新元素）

我有两个菜单，我想使用切换切换。交换它们没有问题，但我无法获得正确的动画

当在两个菜单之间切换时，我希望第一个菜单从屏幕上弹出，第二个菜单同时在第一个菜单的位置上弹出

我用我目前为止尝试过的东西做了一个代码笔：

如何创建看起来平滑的交换动画？就像洗牌一副牌一样，旧菜单使用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>

CSS:

只需删除

$（“#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');

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

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