開閉式のアコーディオンのアニメーション

調べながら下記のような動きにはできましたが納得できず質問させてください。

「もっと見る」押下で各li自体にアニメーションをつけるのではなく、非表示->表示になった要素（li:nth-of-type(n+4)）をまとめてアニメーションさせたいと思っています。
しかしそれらをラップする要素がないため、min-heightなど設定する事ができず、悪戦苦闘していました。
よろしくお願いします。

CodePen
https://codepen.io/cotton/pen/WNjJQVB

html
1<div class="inner">
2    <main>
3      <section id="company">
4        <div class="post-list">
5          <h2>記事一覧</h2>
6          <ul class="title-list">
7            <li>猿がとても楽しそうにこちらを見ています</li>
8            <li>犬がしっぽを沢山ふっています</li>
9            <li>猫が回転しながら昼寝をしています</li>
10            <li>ハムスターがとてもかわいい</li>
11            <li>ミジンコが呼吸しています</li>
12            <li>ティラノサウルスがとても獰猛です</li>
13            <li>人間は考える葦です</li>
14            <li>鳥が空を飛んでいます</li>
15            <li>ダンゴムシが動いています</li>
16            <li>地球は生きています</li>
17          </ul>
18          <p><a href="#" class="open-btn">もっと見る</a></p>
19        </div>
20      </section>
21    </main>
22  </div>

css
1.inner {
2	width: 960px;
3	margin: 0 auto;
4}
5.post-list {
6	padding-top: 20px;
7	padding-bottom: 20px;
8	padding-left: 40px;
9	margin-left: 40px;
10	width: 800px;
11	background-color: #fff;
12}
13h2 {
14	margin-bottom: 20px;
15}
16ul {
17	width: 500px;
18	margin-bottom: 40px;
19}
20li {
21	text-decoration: underline;
22	list-style: none;
23	margin-bottom: 20px;
24  animation: displaShowClose 0.3s linear 0s;
25}
26main {
27	padding-top: 40px;
28	background-color: lemonchiffon;
29}
30section {
31	height: 700px;
32}
33.open-btn {
34	background-color: blue;
35	color: white;
36	text-decoration: none;
37	padding: 4px 10px;
38	border-radius: 4px;
39	font-size: 14px;
40}
41@keyframes displaShow {
42  from {
43    opacity: 0;
44    transform: translateY(5px);
45  }
46
47  to {
48    opacity: 1;
49    transform: translateY(0px);
50  }
51}
52@keyframes displaShowClose {
53  from {
54    opacity: 1;
55    transform: translateY(0px);
56  }
57
58  to {
59    opacity: 0;
60    transform: translateY(5px);
61  }
62}
63li.on {
64  animation: displaShow 0.3s linear 0s;
65  display: block;
66}

javascript
1$(function() {
2	var hideList = '.title-list li:nth-of-type(n+4)';
3	$(hideList).hide();
4	$('.open-btn').on('click', function() {
5		$(hideList).toggle();
6		$(hideList).toggleClass('on');
7		if ($(hideList).css('display') == 'none') {
8			$('.open-btn').text('もっと見る');
9		} else {
10			$('.open-btn').text('閉じる');
11		}
12		return false;
13	});
14
15	var num = $('.title-list').children('li').length;
16	if (num < 4) {
17		$('.open-btn').hide();
18	};
19});

Lhankor_Mhy

2021/07/30 03:12

現状でもアニメーションしているようですが、問題なのはどういう部分ですか？

cotton88

2021/07/30 03:16

現状、li毎にアニメーションが掛かっていますが、4つめ以降をまとめてアニメーションをさせたいと思っています。 li毎のアニメーションだとボタン押下後、ガクッとなってしまうのを直したいです

Lhankor_Mhy

2021/07/30 03:18

スライドさせたい、みたいな話でしょうか？

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

回答1件

ベストアンサー

javascript
1$(function() {
2  var hideList = '.title-list li:nth-of-type(n+4)';
3  var speed=30;//larger the slower
4  $(hideList).hide();
5    $('.open-btn').on('click', function() {
6      if($('.open-btn').text()=="もっと見る"){
7        $('.open-btn').text("閉じる");
8        $(hideList).each(function(num){
9          $(this).delay(num*speed).queue(function(){
10            $(this).show().toggleClass('on').dequeue();
11          });
12        });
13      }else{
14        $('.open-btn').text("もっと見る");
15        $(hideList).hide();
16      }
17    });
18});