jsを使わないアコーディオンの実装
CSS
webcreatersboxさんで紹介されてたdetailsタグとsummaryタグを使ったアコーディオンにCSSでアニメーションを付け加えて見ようと思ってやってみました。
レスポンシブデザインが主流になって、アコーディオンなどの動作が多用されるサイトが多いですね。
でもjQueryは重いし、jsでガシガシ描くにはめんどくさいってことで現時点で対応ブラウザの問題はありますが、これから実装が増えるんじゃないかと思い、忘備録的な意味でブログに書こうと思いつきました。
Adobe xDってすごいよ
プロトタイプでページ遷移のイメージを共有したり、 sticky headerのイメージを作成したりできるよ。
|
1 2 3 4 5 6 |
<div> <details> <summary>Adobe xDってすごいよ</summary> プロトタイプでページ遷移のイメージを共有したり、 sticky headerのイメージを作成したりできるよ。 </details> </div> |
これにアニメーションを追加するってことでやってみます。
SCSSの内容
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
div{ margin: 10px 0; } details{ &[open]{ summary{ transition: all 300ms ease; } p{ animation: openDetail 400ms ease; display: block; height: auto; } } p{ display: none; height: 0px; } } summary{ background: gray; padding:0.5em; cursor: pointer; color: white; outline: none; } p{ padding: 10px; } @keyframes openDetail { 0% { opacity: 0; padding-top: 0; padding-bottom: 0; transform: translateY(0%); } 50% { transform: translateY(0%); } 100% { opacity: 1; padding: 10px; transform: translateY(0%); } } |
CSSの場合
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
div { margin: 10px 0; } details[open] summary { -webkit-transition: all 300ms ease; transition: all 300ms ease; } details[open] p { -webkit-animation: openDetail 400ms ease; animation: openDetail 400ms ease; display: block; height: auto; } details p { display: none; height: 0px; } summary { background: gray; padding: 0.5em; cursor: pointer; color: white; outline: none; } p { padding: 10px; } @-webkit-keyframes openDetail { 0% { opacity: 0; padding-top: 0; padding-bottom: 0; -webkit-transform: translateY(0%); transform: translateY(0%); } 50% { -webkit-transform: translateY(0%); transform: translateY(0%); } 100% { opacity: 1; padding: 10px; -webkit-transform: translateY(0%); transform: translateY(0%); } } @keyframes openDetail { 0% { opacity: 0; padding-top: 0; padding-bottom: 0; -webkit-transform: translateY(0%); transform: translateY(0%); } 50% { -webkit-transform: translateY(0%); transform: translateY(0%); } 100% { opacity: 1; padding: 10px; -webkit-transform: translateY(0%); transform: translateY(0%); } } |
これで若干のアニメーションはつけることができました。
でもこれって閉じる時にはアニメーションかかってないので、もう少し検討しないといけないですね。
