Javascript CSS转换在添加类时起作用，但在删除类时不起作用

首先，我想说的是我读过这篇文章：

那里的解决方案对我不起作用。我有一个导航，当浏览器位于小断点内时隐藏，当单击元素时显示。单击元素可以通过jQuery添加一个类。打开后，会有一个关闭按钮，单击该按钮将删除该类。该类正在按预期进行加法和减法运算，但由于某些原因，转换仅在添加.open类时有效，而在删除该类时无效。这是我的密码：

HTML:

已编译的CSS：

#header #menu-main-nav {
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
  position: absolute;
  top: -27px;
  left: 0px;
  height: 0;
  overflow: hidden;
  z-index: 5000;
} 
#header #menu-main-nav.open {
  opacity: 1;
  height: auto;
}

jQuery：

$('body').on('click', '.menu-main-nav-container', function(e) {
        if(!$mobileNav.hasClass('open')) {
            $mobileNav.addClass('open');
        }
    }).on('click', '.nav-close', function(e) {
        if($mobileNav.hasClass('open')) {
            $mobileNav.removeClass('open');
        }
    })
});

---

我被难住了。请记住，我正在使用Compass，并且初始转换正在按预期工作。

试试这个，您只是忘记了“在您的身体中”元素，而将这些元素放在了里面 像这样：

$(document).ready(function(){
    $("body").on('click', '.menu-main-nav-container', function(e) {
        if(!$("mobileNav").hasClass('open')) {
            $("mobileNav").addClass('open');
        }
    }).on('click', '.nav-close', function(e) {
        if($("mobileNav").hasClass('open')) {
            $("mobileNav").removeClass('open');
        }
    })
});

---

如注释中所述，问题在于删除类时，height:0会立即隐藏元素。不透明度仍然会转换，但您看不到它

不幸的是，由于height:auto不是一个可转换的值，因此向转换添加高度并没有任何帮助。如果在开放类不存在时设置延迟，但在添加延迟时删除延迟，则可以使用固定的高度执行此操作

var$menu=$'menu-main-nav'； 设置间隔函数{ $menu.toggleClass'open'； }, 2000; 菜单主导航{ 背景：灰色； 溢出：隐藏； 身高：0； 不透明度：0； 过渡：不透明度1s，高度0s 1s； } 菜单-main-nav.open{ 高度：300px； 不透明度：1； 过渡：不透明度1s，高度0s； }

---

你能添加你编译的CSS和/或创建一个MCVE吗？这是因为高度立即从0变为自动。添加class.open时，这是正常的，因为动画发生在高度扩展为“自动”之后。但是当.open类被删除时，您不会看到动画，因为高度先变为0，然后动画就开始了。@SuviVignarajah我尝试过包含一个过渡，但仍然使用相同的缓和功能和持续时间来调整高度，并将height:auto更改为height:300px，因为如果我没有弄错的话，css过渡将无法与height:auto一起工作，问题仍然存在。添加.open类后，菜单淡入，下拉菜单的高度增加。但是，当我再次单击时，它会像以前一样突然消失。@AlexanderO'Mara刚刚添加了已编译CSS的相关行file@SuviVignarajah关于为什么会发生这样的事情是正确的。下面是一个使其在固定高度下工作的示例。有不同的方法可以解决这个问题。为什么要更改高度和不透明度？对不起，我的错，我确实有引号，但不知怎的，它们在粘贴时被删除了。我想我粘贴了除了$'body'部分之外的所有内容，然后在键入时忘记了添加它们。不幸的是，这不是问题所在。我已经确认该类已成功添加和删除。谢谢！实际上不需要高度，因此此解决方案有效

$('body').on('click', '.menu-main-nav-container', function(e) {
        if(!$mobileNav.hasClass('open')) {
            $mobileNav.addClass('open');
        }
    }).on('click', '.nav-close', function(e) {
        if($mobileNav.hasClass('open')) {
            $mobileNav.removeClass('open');
        }
    })
});

$(document).ready(function(){
    $("body").on('click', '.menu-main-nav-container', function(e) {
        if(!$("mobileNav").hasClass('open')) {
            $("mobileNav").addClass('open');
        }
    }).on('click', '.nav-close', function(e) {
        if($("mobileNav").hasClass('open')) {
            $("mobileNav").removeClass('open');
        }
    })
});