我有这样一种情况,例如,我有一个接一个地跟随彼此的小盒子,我希望用户能够切换这些元素的显示/隐藏,我让它们按我想要的方式工作,但是当相应的框已折叠/隐藏,其下方的内容也不会向上折叠。
我理解为什么会这样,这是因为使用 transform
它仍然为您从原始位置转换出来的元素分配空间;但是我无法想出另一种方法来以与使用负 margin-top
相同的方式来完成它,出于某种原因没有像 transform 那样流畅地制作动画。
代码笔: http://codepen.io/gutterboy/pen/GqRoJY
CodePen(边缘顶部版本): http://codepen.io/gutterboy/pen/WxNGVG
HTML:
<div class="foo">
<header>
Header
<a href="#" class="toggle" data-content-id="1">Toggle</a>
</header>
<div class="content-wrap">
<div id="content-1" class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur id non ita fit? Et ille ridens: Video, inquit, quid agas; Quorum altera prosunt, nocent altera. Nulla erit controversia. Neutrum vero, inquit ille. Quis non odit sordidos, vanos, leves, futtiles?
Duo Reges: constructio interrete. Quare ad ea primum, si videtur;
</div>
</div>
</div>
<div class="foo">
<header>
Header
<a href="#" class="toggle" data-content-id="2">Toggle</a>
</header>
<div class="content-wrap">
<div id="content-2" class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur id non ita fit? Et ille ridens: Video, inquit, quid agas; Quorum altera prosunt, nocent altera. Nulla erit controversia. Neutrum vero, inquit ille. Quis non odit sordidos, vanos, leves, futtiles?
Duo Reges: constructio interrete. Quare ad ea primum, si videtur;
</div>
</div>
</div>
<div class="foo">
<header>
Header
<a href="#" class="toggle" data-content-id="3">Toggle</a>
</header>
<div class="content-wrap">
<div id="content-3" class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur id non ita fit? Et ille ridens: Video, inquit, quid agas; Quorum altera prosunt, nocent altera. Nulla erit controversia. Neutrum vero, inquit ille. Quis non odit sordidos, vanos, leves, futtiles?
Duo Reges: constructio interrete. Quare ad ea primum, si videtur;
</div>
</div>
</div>
CSS (SCSS):
.foo {
margin: 10px;
width: 400px;
header {
padding: 10px;
border: 1px solid #000;
border-bottom: 2px solid #000;
}
.content-wrap {
overflow-y: hidden;
transform-style: preserve-3d;
}
.content {
padding: 10px;
background-color: gray;
transform: translateY(0);
border: 1px solid #000;
border-top: none;
transition: 1s;
&.closed {
transform: translateY(-100%);
}
}
}
JS(jQuery):
$(document).ready(function() {
$('.toggle').on('click', function(e) {
e.preventDefault();
var content_id = $(this).data('content-id');
$('#content-' + content_id).toggleClass('closed');
});
});
有没有办法让下面的盒子在处理盒子的同时顺利折叠?
另请注意,盒子的高度是可变的,因此我们不能使用 height
,希望避免使用非常高的 max-height
等骇人听闻的解决方案,最好避免使用使用任何 JS 制作动画。
最佳答案
您的问题,由于 margin : -100%
而延迟启动,并且 div 在 margin : -40%
时仍然不可见
和
CSS 过渡在添加或删除类时不产生动画,它只会在您更改 CSS 属性时产生动画。并且您直接添加和删除类。
这是通过 jQuery 获取它的另一种方法:
$('.toggle').on('click', function(e) {
var content_id = $(this).data('content-id');
$('#content-' + content_id).slideToggle('slow');
});
已更新 Codepen
关于css - 使用转换隐藏内容时让以下内容折叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37496523/