各要素切り替えの際、position:relativeのため次の内容が下から不自然に出てきてしまう

【悩み事】
セクションの切り替えをする時に、次のセクションが下から不自然に出てきてしまう。
https://codepen.io/tomokot/pen/LYbowWR
position:absoluteを使用すれば、スライドする要素が全て同じ位置に配置されるのですが
親要素の縦幅が反映されないためabsoluteは使用していません。

【やりたい事】
以下のように自然に次のセクションが出てきて、親要素が子要素毎に縦幅が変わるようにしたいです。
https://mynavi-agent.jp/entry/

HTML
1
2<form method="post" novalidate>
3  <div id="msform"> 
4    <!-- fieldset 01 -->
5    <fieldset>
6      <div class="label-box">
7        <input type="radio" name="email" placeholder="Email" />
8        <label for="web">test</label>
9      </div>
10      <div class="label-box">
11        <input type="radio" name="email" placeholder="Email" />
12        <label for="web">test</label>
13      </div>
14      <input type="button" name="next" class="next action-button" value="Next">
15    </fieldset>
16    
17    <!-- fieldset 02 -->
18    <fieldset>
19      <div class="label-box">
20        <input type="radio" name="email" placeholder="Email" />
21        <label for="1month">test</label>
22      </div>
23      <div class="label-box">
24        <input type="radio" name="email" placeholder="Email" />
25        <label for="web">test</label>
26      </div>
27      <div class="label-box">
28        <input type="radio" name="email" placeholder="Email" />
29        <label for="web">test</label>
30      </div>
31      <input type="button" name="previous" class="previous action-button" value="Previous" />
32      <input type="button" name="next" class="next action-button" value="Next" />
33    </fieldset>
34    
35    <!-- fieldset 03 -->
36    <fieldset>
37      <div class="label-box">
38        <input type="radio" name="email" placeholder="Email" />
39        <label for="web">test</label>
40      </div>
41      <div class="label-box">
42        <input type="radio" name="email" placeholder="Email" />
43        <label for="web">test</label>
44      </div>
45      <div class="label-box">
46        <input type="radio" name="email" placeholder="Email" />
47        <label for="web">test</label>
48      </div>
49      <div class="label-box">
50        <input type="radio" name="email" placeholder="Email" />
51        <label for="web">test</label>
52      </div>
53      <div class="label-box">
54        <input type="radio" name="email" placeholder="Email" />
55        <label for="web">test</label>
56      </div>
57      <input type="button" name="previous" class="previous action-button" value="Previous" />
58      <input type="button" name="next" class="next action-button" value="Next" />
59    </fieldset>
60    
61  </div>
62</form>
63

CSS
1#msform {
2    overflow: hidden;
3  margin: 50px auto;
4  text-align: center;
5  margin: 0 uato;
6  width: 70%;
7  position: relative;
8  background-color: #222;
9}
10.label-box {
11    width: 50%;
12    border: 2px solid #11a2cb;
13    border-radius: 10px;
14  background-color: #fff;
15    margin: 2% auto;
16    height: auto;
17     position: relative; 
18}
19input[type="radio"] {
20    display: none;
21}
22label {
23  padding: 20px;
24    display: inline-block;
25    width: -webkit-fill-available;
26    position: relative;
27    cursor: pointer;
28}
29#msform fieldset {
30  border: 0 none;
31  border-radius: 3px;
32  box-sizing: border-box;
33  width: 400px;
34  margin: 0 auto;
35}
36#msform fieldset:not(:first-of-type) {
37  display: none;
38}
39#msform input,
40#msform textarea {
41  padding: 15px;
42  border: 1px solid #ccc;
43  border-radius: 3px;
44  margin-bottom: 10px;
45  width: 100%;
46  box-sizing: border-box;
47  font-family: montserrat;
48  color: #2C3E50;
49  font-size: 13px;
50}
51#msform .action-button {
52  width: 100px;
53  background: #27AE60;
54  font-weight: bold;
55  color: white;
56  border: 0 none;
57  border-radius: 1px;
58  cursor: pointer;
59  padding: 10px 5px;
60  margin: 10px 5px;
61}

js
1//jQuery time
2(function($) {
3  var current_fs, next_fs, previous_fs; 
4  var left, opacity, scale;
5  var animating;
6
7  $(".next").click(function() {
8    if (animating) return false;
9    animating = true;
10    current_fs = $(this).parent();
11    next_fs = $(this).parent().next();
12    next_fs.show();
13    current_fs.animate({
14      opacity: 0
15    }, {
16      step: function(now, mx) {
17        opacity = 1 - now;
18        next_fs.css({
19          'left': left,
20          'opacity': opacity
21        });
22      },
23      duration: 800,
24      complete: function() {
25        current_fs.hide();
26        animating = false;
27      },
28      easing: 'easeInOutBack'
29    });
30  });
31
32  $(".previous").click(function() {
33    if (animating) return false;
34    animating = true;
35
36    current_fs = $(this).parent();
37    previous_fs = $(this).parent().prev();
38
39    previous_fs.show();
40    current_fs.animate({
41      opacity: 0
42    }, {
43      step: function(now, mx) {
44        opacity = 1 - now;
45        current_fs.css({
46          'left': left
47        });
48        previous_fs.css({
49          'transform': 'scale(' + scale + ')',
50          'opacity': opacity
51        });
52      },
53      duration: 800,
54      complete: function() {
55        current_fs.hide();
56        animating = false;
57      },
58      easing: 'easeInOutBack'
59    });
60  });
61
62})(jQuery);
63

行動規範の内容に同意します

回答1件

ベストアンサー

https://mynavi-agent.jp/entry/では、
各要素に position: absolute; left: -100%; を設定して画面外に出しておいて、
表示する要素に is-currentクラスを付加して、
.is-current に position: relative; left: 0; を設定しておき、
画面内に戻しているようです。

html
1<form method="post" novalidate>
2  <div id="msform"> 
3    <!-- fieldset 01 -->
4    <fieldset class="is-current">
5        略
6    </fieldset>
7    
8    <!-- fieldset 02 -->
9    <fieldset class="">
10        略
11    </fieldset>
12    
13    <!-- fieldset 03 -->
14    <fieldset class="">
15        略
16    </fieldset>
17
18  </div>
19</form>

css
1#msform fieldset {
2  border: 0 none;
3  border-radius: 3px;
4  box-sizing: border-box;
5  width: 400px;
6  margin: 0 auto;
7  position: absolute;
8  top: 0;
9  left: -100%;
10  bottom: 0;
11  transition: all .8s;
12}
13#msform fieldset:nth-child(1) {z-index:5}
14#msform fieldset:nth-child(2) {z-index:4}
15#msform fieldset:nth-child(3) {z-index:3}
16#msform fieldset.is-current {
17  position: relative;
18  left: 0;
19}

js
1(function($) {
2  var current_fs;
3  $(".next").click(function() {
4    current_fs = $(this).parent();
5    current_fs.removeClass('is-current');
6    current_fs.next().addClass('is-current');    
7  });
8  $(".previous").click(function() {
9    current_fs = $(this).parent();
10    current_fs.removeClass('is-current');
11    current_fs.prev().addClass('is-current');    
12  });
13
14})(jQuery);