在 ToggleClass 上转发动画

Question

我正在尝试显示一个带有 jquery 动画的 toggleClass 的全屏菜单。我可以做到，但我希望转发关闭菜单的动画具有相同的效果。欢迎使用任何方法。

我的密码笔：https://codepen.io/carlos-turpin-trives/pen/jOweWBN

我正在使用一个简单的功能，它会在以这种方式出现叠加层后显示菜单：

$('#toggle').click(function() {
   $(this).toggleClass('active');
   $('.overlay').toggleClass('open');
   $('h1 span').toggleClass('opens');  
  });

使用此代码 css 显示叠加层：

.overlay {
  position: fixed;
  background: #1abc9c;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s, visibility .35s, height .35s;
  overflow: hidden;
  z-index:50;
}
.overlay.open {
  opacity: .9;
  visibility: visible;
  height: 100%;
}

还有这样的菜单：

.opens {
  display: block;
  animation: reveal 1.5s;
}
@keyframes reveal {
  0% {
    transform: translate(0,100%);
  }
  100% {
    transform: translate(0,0);
  }
}

我将学习如何使用 toggleClass 转发动画。谢谢！

Answer 1

在每个显示内容的类中使用转换延迟解决。