我有一个容器div里面有一个表单，默认情况下submit按钮是隐藏的。单击WelcomeSettingSicon按钮时，我将在submit按钮中淡出，父div将自我扩展。这个扩展就像show/hide一样的snap。我想要的是添加一个过渡，这样父div就在submit按钮的淡入开始之前，通过submit按钮的空间过渡来扩展自己。
我使用的方法是从这个答案。但是，当我将它应用到代码中时，父div在扩展时没有得到过渡。此外，在submit按钮首次淡出后，div会迅速调整到它的新位置，当我再次关闭和打开时，按钮的高度会受到open类的影响，fadeIn会松动它的效果。
此外，当我移除类'open'时，.bottom-content的父母‘不会关闭。
HTML：
<div class="col-lg-6" style="background: lightblue">
<div class="content content-narrow">
<div class="block">
<div class="block-header">
<button type="button"><i id="welcomeSettingsIcon"></i></button>
</div>
<div class="block-content block-content-narrow" id="welcomePanel">
<form id="welcomeForm">
<section class="top-content">
// form elements <br />
// form elements <br />
// form elements <br />
// form elements
</section>
<section class="bottom-content">
<button id="welcomeSubmitBtn" type="submit">Btn</button>
</section>
</form>
</div>
</div>
CSS：
.bottom-content {
transform: scaleY(0);
transition: transform 250ms ease-in;
transform-origin: top;
}
.bottom-content.open {
transform: scaleY(1);
}
.bottom-content.open #welcomeSubmitBtn {
opacity: 1;
}
#welcomeSubmitBtn {
margin-top: 20px;
opacity: 0;
transition: opacity 0.5s;
transition-delay: 250ms;
}
jQuery：
jQuery(document).ready(function() {
var welcomeForm = false;
jQuery('#welcomeSettingsIcon').click(function() {
if (welcomeForm) {
jQuery('#welcomeSubmitBtn').css('opacity', 0);
jQuery('#welcomeSubmitBtn').hide();
jQuery('.bottom-content').removeClass('open');
welcomeForm = false;
} else {
jQuery('#welcomeSubmitBtn').show();
jQuery('#welcomeSubmitBtn').css('opacity', 1);
jQuery('.bottom-content').addClass('open');
welcomeForm = true;
}
}
})
我不是100%清楚你在找什么，所以让我知道如果这是接近的。我认为不需要open类，除非您真的希望在CSS中完成所有操作：
null
jQuery(document).ready(function() {
var welcomeForm = false;
jQuery('#welcomeSettingsIcon').click(function() {
if (welcomeForm) {
jQuery('#welcomeSubmitBtn').hide();
jQuery('.bottom-content').hide();
welcomeForm = false;
//jQuery('#welcomeSubmitBtn').css('opacity', 0);
//jQuery('#welcomeSubmitBtn').hide();
//jQuery('.bottom-content').removeClass('open');
} else {
jQuery('.bottom-content').slideDown(2000, function() {
jQuery('#welcomeSubmitBtn').fadeIn();
welcomeForm = true;
//jQuery('#welcomeSubmitBtn').show();
//jQuery('#welcomeSubmitBtn').css('opacity', 1);
//jQuery('.bottom-content').addClass('open');
})
}
});
});/* .bottom-content {
transform: scaleY(0);
transition: transform 250ms ease-in;
transform-origin: top;
}
.bottom-content.open {
transform: scaleY(1);
}
.bottom-content.open #welcomeSubmitBtn {
opacity: 1;
}
#welcomeSubmitBtn {
margin-top: 20px;
opacity: 0;
transition: opacity 0.5s;
transition-delay: 250ms;
}
*/
.bottom-content {
display: none;
height: 60px;
}
#welcomeSubmitBtn {
display: none;
margin-top: 20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="col-lg-6" style="background: lightblue">
<div class="content content-narrow">
<div class="block">
<div class="block-header">
<button type="button" id="welcomeSettingsIcon">Click Me
</button>
</div>
<div class="block-content block-content-narrow" id="welcomePanel">
<form id="welcomeForm">
<section class="top-content">
// form elements
<br />// form elements
<br />// form elements
<br />// form elements
</section>
<section class="bottom-content">
<button id="welcomeSubmitBtn" type="submit">Btn</button>
</section>
</form>
</div>
</div>
</div>
</div>