gpt4 book ai didi

javascript - CSS Transition 在添加类时有效,但不删除它

转载 作者:太空宇宙 更新时间:2023-11-04 16:17:27 24 4
gpt4 key购买 nike

首先,我只想说我已经阅读了这个主题:

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 并且初始转换按预期进行。

最佳答案

如评论中所述,问题是 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 计算目标高度,并在动画持续期间将其设置为固定高度。

关于javascript - CSS Transition 在添加类时有效,但不删除它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31215396/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com