ウェブサイトのQAで、Qをクリックしたら、Aが下に現れるアニメーションを実装についてのメモです。
実は、やるたびに調べたり、考えたりして、なんとか実装はできているんですが、
いつも時間かかるし、コードが違うような気がしています。
それはそれで勉強になるのですが、時間かかってかなわないので、
今回、なかなかいい感じで実装できたので、メモすることにしました。

HTML

これもいつも迷うのですが、今回は<ul><li>で書きました。

<ul class="p-faq__list">
<li class="p-faq__item">
	<h3 class="p-faq__question">
		<span class="p-faq__question__text">
　　　　　　　　　　　　　　　　　　　　毎回JavaScriptをいちから書くのは大変ではないですか？
		</span>
	</h3>
	<p class="p-faq__answer">
		<span class="p-faq__answer__text">
			確かに、たいへんですが、まあまあ勉強にはなるので、今は、まあいいかなと思っています。
		</span>
	</p>
</li>
<li class="p-faq__item">
	<h3 class="p-faq__question">
		<span class="p-faq__question__text">
			では、今後はどうするつもりですか？
		</span>
	</h3>
	<p class="p-faq__answer">
		<span class="p-faq__answer__text">
			今後お仕事としてコーディングすることになるので、そうなるとスピードが求められます。自分のsnippetとして登録したいと思います。
		</span>
	</p>
</li>
</ul>

考え方 p-faq-question をクリックしたら、p-faq-answer を出現させる。

translateYとvisibility,opacityで表示、非表示を制御
1. answerを上に１００％ずらしても、questionの下に高さがのこってしまう。
2. display:noneを入れてみるがそうすると、transitionは効かない
高さもアニメーションに追加
1. タイミングがうまくいかず、重なって見えるので、propertyごとに、transition-durationを指定して調整することにしました。

完成CSS

.p-faq__question {
　　　　background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 65px;
　　　　cursor: pointer;
  &::after {
    content: "ー";
    font-size: 2.5rem;
    padding-right: 1%;
  }
}

.p-faq__answer {
  background-color: #ｆ２ｆ２ｆ２;
  line-height: 65px;
　　　　　height: 0px;
　　　　　visibility: hidden;
　　　　　opacity: 0;
　　　　　transition: height .3s, visibility .1s, opacity .1s;
  &__text {
    padding-left: 26px;
  }
}
.p-faq__answer.open{
	transition: height .3s, visibility .5s, opacity .5s;
	height: 65px;
	visibility: visible;
	opacity: 1;
}

ふりかえり

最初、qa全体全体にoverflow:hiddenをつけて、その高さを制御することでanswer部分の表示非表示をするようにしたのですが、アニメーションの動きが、上から開くのではなく、ちょっと意図した動きにならず。毎回、いろいろ試行錯誤してばかりなので、このメモをもとに、次のQAはさくっと実装できるようにしたいです。