我的网站有一个表格，其中包含一些要回答的问题。我希望这些问题按顺序出现，所以我决定只在您在上一个输入中选择一个选项后，它们才会出现。从功能上来说，这完全符合我的期望。但是，我对动画改变单个问题容器中的间距的方式感到不满意。我认为这与以下事实有关：容器没有明确的高度，因此它们在动画时不会相对于父级进行更新。我正在使用JQuery和Sass。
[JS小提琴]（https://jsfiddle.net/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="profile">
<div class='profile-content'>
<div class='profile-msg'>Generic Title</div>
<form class='profile-form' action='/profile' method='POST'>
<div class='profile-options'>
<div class='profile-setting' data-setting='0'>
<div class='setting-title'>Setting A</div>
<div class='option-container'>
<select name="a" placeholder="A" class='profile-input'>
<option value='' selected hidden disabled>Option A...</option>
<option value="1">United States</option>
<option value="2">Canada</option>
<option value="3">China</option>
</select>
</div>
<div class='description'>The first option</div>
</div>
<div class='profile-setting' data-setting='1'>
<div class='setting-title'>Setting B</div>
<div class='option-container'>
<input type='radio' value="1" id='b-1' name='b' class='profile-input'>
<label for='b-1'>Skateboard</label>
<input type='radio' value="2" id='b-2' name='b' class='profile-input'>
<label for='b-2'>Bicycle</label>
</div>
<div class='description'>The second option</div>
</div>
<div class='profile-setting' data-setting='2'>
<div class='setting-title'>Option C</div>
<div class='option-container'>
<input type='radio' value="1" id='c-1' name='c' class='profile-input'>
<label for='c-1'>Hungry</label>
<input type='radio' value="2" id='c-2' name='c' class='profile-input'>
<label for='c-2'>Excited</label>
<input type='radio' value="3" id='c-3' name='c' class='profile-input'>
<label for='c-3'>Scared</label>
</div>
<div class='description'>The third option</div>
</div>
</div>
<input id='profile-submit' type="submit" name='Smave' placeholder='Save' data-setting='4' />
</form>
</div>
</div>
$blue: #377ac5;
$base-color: #42A5F5;
$base-gray: #999;
body {
background: $blue;
}
@mixin text-shadow($opacity) {
text-shadow: 1px 2px 5px rgba(0, 0, 0, $opacity);
}
@mixin transition($time: 0.2s, $what: all, $how: ease-in-out) {
-webkit-transition: $what $time $how;
-moz-transition: $what $time $how;
-ms-transition: $what $time $how;
-o-transition: $what $time $how;
transition: $what $time $how;
}
@mixin card-template($color) {
background: $color;
border-radius: 2px;
box-shadow: 1px 1px 5px darken($color, 45%);
}
@mixin submit-button {
@include transition;
@include card-template($base-color);
border: none;
color: white;
&:hover:enabled, &:focus:enabled {
background: darken($base-color, 20%);
outline: none;
}
}
#profile {
align-items: center;
color: white;
display: flex;
height: 100%;
justify-content: center;
width: 100%;
.profile-content {
width: 100%;
.profile-msg {
@include text-shadow(0.3);
font-size: 1.5em;
padding: 0.5em 0;
text-align: center;
}
.profile-form {
align-items: center;
display: flex;
flex-direction: column;
font-size: 1.2em;
justify-content: top;
.profile-options {
@include card-template($base-color);
display: flex;
height: 0;
flex-direction: column;
padding: 0 1.0em;
.profile-setting {
align-items: center;
display: none;
// display: flex;
flex-direction: column;
justify-content: space-between;
opacity: 0;
padding: 0.8em 0.3em;
.setting-title {
@include text-shadow(0.2);
}
.option-container {
align-items: center;
display: flex;
justify-content: space-evenly;
padding: 0.3em;
label {
@include card-template(white);
@include transition;
color: black;
font-size: 0.6em;
margin: 0 0.2em;
padding: 0.3em;
&:hover {
background: darken(white, 10%);
}
&:active {
background: darken(white, 25%);
}
}
input[type='radio'] {
display: none;
&:checked + label {
background: darken(white, 15%);
margin: 0 1.0em;
transform: scale(1.2);
}
}
}
.description {
@include text-shadow(0.15);
font-size: 0.8em;
}
}
}
#profile-submit {
display: none;
opacity: 0;
.submit-button {
@include submit-button;
margin-top: 1.5em;
padding: 0.5em 1.5em;
}
}
}
}
}
$options = $('.profile-options')
function $next_option(data) {
// Animate to new height
$options_cur_height = $options.height()
$next_setting = $(`.profile-setting[data-setting=${data}]`)
$next_setting.css({ display: 'flex' })
$options_auto_height = $options.css({ height: 'auto' }).height()
$options.css({ height: $options_cur_height })
$options.animate({
height: $options_auto_height
}, 1000)
// Fade in setting container
$(`.profile-setting[data-setting='${data}']`).delay(500).animate({
opacity: 1
}, 1500)
}
$next_option(0)
// Each setting will trigger the next animation when changed
$settings = $('.profile-setting')
$submit = $('#profile-submit')
$settings.each(i => {
$inputs = $(`.profile-setting[data-setting=${i}]`).find('.profile-input')
$inputs.change(() => {
$next_option(i + 1)
})
})
编辑：更具体地说，我想使标题，输入和描述（设置A，选择框和“第一个选项”为例）之间的间距保持恒定，同时为父母