'Slide-out' 动画 class 未在点击时应用

Question

现在我处于困境，我创建了一个全屏导航，在点击时应用 bounce-in-top class。

再次单击菜单切换按钮后，应该删除 bounce-in-top class 并添加 slide-out-top class 以触发退出动画。

如果我单击导航叠加层上的任意位置，菜单会成功应用 class 并滑出屏幕。但是，如果我按下切换按钮，class 不会应用并且会突然离开屏幕。

我绞尽脑汁想不明白为什么会这样。

这是我的 Codepen 代码：https://codepen.io/jayciemota/pen/GRmpbxZ

Answer 1

未应用 class，因为您没有添加它。

  if (clickEd) {
    navMenu.classList.remove('slide-out-top')
    navMenu.classList.toggle('bounce-in-top')
    menuToggle.classList.toggle('clicked')
  }

理想情况下，您应该在每隔一次单击菜单切换时添加 .slide-out-top。您可以通过简单地检查切换之前是否已被单击并关闭它来完成此操作。

   if (clickEd) {
     if (menuToggle.classList.contains('clicked')) {
      menuToggle.classList.remove('clicked');
      navMenu.classList.remove('bounce-in-top')
      navMenu.classList.toggle('slide-out-top')
     } else {
      navMenu.classList.remove('slide-out-top')
      navMenu.classList.toggle('bounce-in-top')
      menuToggle.classList.toggle('clicked') 
     }

result

'Slide-out' 动画 class 未在点击时应用

'Slide-out' animation class not being applied on click

javascript

css

css-animations

css-transitions