在 ToggleClass 上转发动画

Posted 2023-05-08

【中文标题】在 ToggleClass 上转发动画

【英文标题】：Forwarding animation on ToggleClass

【发布时间】：2021-11-19 03:14:46

【问题描述】：

我正在尝试显示一个带有 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 转发动画。谢谢！

【参考方案1】：

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