塌陷过渡
塌陷过渡
提问于 2017-04-07 08:59:15
我正在做一个定制的折叠器，但是我不知道如何在隐藏的时候进行转换。
在网上搜索时，我发现了"display: none“，但它不支持转换。
我已经尝试过做高度:自动；然后是高度: 0px；但是它也不支持转换。
下面是代码：
HTML
<a class="clp" href="#clp-1"><div>Button</div></a>
<div class="clp-body clp-show" id="clp-1">Lorem ipsum</div>CSS
.clp > div {
border: 1px solid black;
border-radius: 3px;
width: 150px;
padding: 5px;
}
.clp {
text-decoration: none;
font-family: Verdana;
color: black;
}
.clp-body {
border: 1px solid black;
border-radius: 3px;
width: 150px;
padding: 5px;
margin-top: 5px;
transition: all 0.5s ease;
}
.clp-show {
opacity: 1;
}
.clp-show {
opacity: 0;
display: none; /* Only for the example */
}JS (jQuery)
$('a.clp').click(function(){
var value = $(this).attr("href");
if ($('div'+(value)).hasClass('clp-show')) {
$('div'+(value)).addClass('clp-hide');
$('div'+(value)).removeClass('clp-show');
}
else {
$('div'+(value)).removeClass('clp-hide');
$('div'+(value)).addClass('clp-show');
};
});这里有一个链接：https://codepen.io/Keyon/pen/937706ce73bc3f68cbeff6dd6faf6c87
回答 7
Stack Overflow用户
回答已采纳
发布于 2017-04-07 09:58:01
您可以使用jQuery的slideDown()和slideUp()来展开和折叠您的div，如下所示：
$('#clp-1').slideDown(); // expand
$('#clp-1').slideUp(); // collapse您还需要删除CSS行transition: all 0.5s ease;，以便jQuery滑动才能正常工作。
Stack Overflow用户
发布于 2017-04-07 09:07:55
为什么不使用Jquery的淡出动画或幻灯片动画，您可以使用动画函数制作自己的动画。
褪色：
$('div'+(value)).fadeIn();
$('div'+(value)).fadeOut();幻灯片：
$('div'+(value)).slideUp();
$('div'+(value)).slideDown();要创建自己的动画：
$('div' + (value)).animate({
//some css propeties example:
margin-right: 500px
}, 5000, function() {
// Animation complete.
});Stack Overflow用户
发布于 2017-04-07 09:57:33
转换不能在高度上工作，您需要使用最大高度。使用下面的CSS。
.clp-body {
max-height: 0; /* set the initial height to 0 */
transition: max-height .5s ease-in; /* define the transition */
}
.clp-show {
max-height: 1000px; /* set it to some high value but it will not expand more than the content height */
}单击clp-show类时切换.clp类
$(".clp").on("click", function () {
$(".clp-body").toggleClass("clp-show");
});编辑:您不需要display:none，因为我们最初是在设置max-height: 0
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43273932
复制相关文章
相似问题
腾讯云开发者
