CSS 过渡在添加类时有效，但不删除它

Question

首先，我只想提一下我已经阅读了这个帖子：

CSS3 transition only when class is added, not when removed

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

HTML：

<div class="menu-main-nav-container">
    <ul id="menu-main-nav" class="menu">
        <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href="http://blackandwright.com/what-we-do">What We Do</a></li>
        <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41"><a href="http://blackandwright.com/team">Team</a></li>
        <li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a href="http://blackandwright.com/case-studies">Case Studies</a></li>
        <li id="menu-item-102" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-102"><a href="http://blackandwright.com/what-next">What Next?</a></li>
        <li id="menu-item-104" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-104"><a href="#contact">Contact</a></li>
        <li id="menu-item-122" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-122"><a href="#close">Close</a></li>
    </ul>
</div>

CSS（指南针 + Sass）：

#menu-main-nav {
    @include single-transition(opacity, 0.3s, ease-in-out);

    opacity: 0;
    position: absolute;
    top: -27px;
    left: 0px;
    height: 0;
    overflow: hidden;
    z-index: 5000;

    &.open {
        opacity: 1;
        height: auto;
    }
}

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，并且初始转换按预期工作。

Answer 1

正如 cmets 中提到的，问题是 height: 0 在删除类时会立即隐藏元素。不透明度仍在过渡，但您看不到它。

不幸的是，由于height: auto 不是可转换的值，因此在转换中添加高度不会有帮助。如果您在开放课程不存在时设置延迟，则可以使用固定高度来执行此操作，但在添加延迟时移除延迟。

var $menu = $('#menu-main-nav');
setInterval(function() {
    $menu.toggleClass('open');
}, 2000);

#menu-main-nav {
    background: grey;
    overflow: hidden;
    height: 0;
    opacity: 0;
    transition: opacity 1s, height 0s 1s;
}
#menu-main-nav.open {
    height: 300px;
    opacity: 1;
    transition: opacity 1s, height 0s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="menu-main-nav-container">
    <ul id="menu-main-nav" class="menu">
        <li><a href="#">What We Do</a></li>
        <li><a href="#">Team</a></li>
        <li><a href="#">Case Studies</a></li>
        <li><a href="#">What Next?</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#close">Close</a></li>
    </ul>
</div>

作为固定height 的替代方案，如果您在展开时不依赖元素的布局，则可以使用可转换的visibility（好吧，无论如何您都可以通过转换延迟它），使用与上述相同的技术。

var $menu = $('#menu-main-nav');
setInterval(function() {
    $menu.toggleClass('open');
}, 2000);

#menu-main-nav {
    background: grey;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s, visibility 0s 1s;
}
#menu-main-nav.open {
    opacity: 1;
    visibility: visible;
    transition: opacity 1s, visibility 0s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="menu-main-nav-container">
    <ul id="menu-main-nav" class="menu">
        <li><a href="#">What We Do</a></li>
        <li><a href="#">Team</a></li>
        <li><a href="#">Case Studies</a></li>
        <li><a href="#">What Next?</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#close">Close</a></li>
    </ul>
</div>

但是，这意味着元素将始终保持相同的高度。如果您确实需要元素具有可变高度，则可以使用 JavaScript 计算目标高度，并将其设置为动画期间的固定高度。

Answer 2

试试这个，你只是忘记了body元素中的“”，把元素放在()里面 像这样：

$(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');
        }
    })
});