クリックしたときに、「+」マークと内容の表示がアニメーションするようにしていきます。
- +から×
- 回答のアニメーション
- アニメーションプロパティ
+から×
・前回まででクリックをしたらアコーディオンが開くように設定できました。
・今回はさらに今っぽいWebページにするためにアニメーションを付けていきます。
・具体的には時間をかけて+から×に変わっていったり回答が上からふわっと現れるようなアニメーションを付けていきます。
・まずはtransitionの設定からやっていきます。
・今回は0.3秒かけて変化させたいのでdt::afterに対してtransition: transform .3s;の指定をしていきます。
回答のアニメーション
・次に回答が上からふわっと現れるようなアニメーションを作っていきます。
・ただ回答に関しては最初は消えている状態で変化前のスタイルを付けることができないので@keyframesを使っていきます。
・まずは定義が必要なので@keyframesと書いて名前をfadeInとしていきます。
・そして0％のときに透明にしてtranslateYを-10pxにして最初は上にある状態にしておきます。opacity: 0;とtransform: translateY(-10px);を指定していけばいいですね。
・次に100%のときに透明度を1にして本来指定していた位置に戻していきます。opacity: 1;とtransform: none;としておけば本来の位置に戻ってくれます。
・@keyframesの定義はこんな感じでいいでしょう。
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(-10px);
}
100% {
opacity: 1;
transform: none;
}
}
アニメーションプロパティ
・最後にdl > div.appear ddに対してアニメーションプロパティでfadeinを実行していけばいいですね。
・今回は0.3秒かけてこれらの変化をさせていきたいのでanimation: .3s fadeIn;としていきましょう。
・こんな感じになっていればOKです。
dl > div.appear dd {
display: block;
animation: .3s fadeIn;
}
