![eyecatch](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZdVX6dzJ7_zP1clVZn2VPRkF37Ui-dUjln99z9M91AzwHqmpZmI5Wbacc_fAB6O_XxO_6LVbhCOYCV_Eve-2OL1RS_i0Vp7YY7ob8IHvTE-raYPy-4WVCBgQ6fP4agnq_PG6n68I9pqgJ7rcOXK3gpWkTQLv0zAYYPoVmXw3Ljqb0N7l3-kCbKXXxTLM/s1600-rw/lightbulb-2581192_1280.jpg)
transitionを簡単に説明
このブログを読んでいるCSSコーダーの人の中で、もしかしたらtransitionについて知らない人もいるかもしれないので、簡単に使い方を解説しておきます。 ボタンを押すと、画像が表示される場合、transitionの設定をしていない場合と、している場合を比較してみましょう。transitionを使用しない場合
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibvgVNVl3o3IDC4MsruSLdVlH5_oKDgq35dAKNsfOAmEjYAdSWjLgnFLVONPBE8UGTwBhqIWNwpNn08CMzX_Tuk_0UeO-PDmc2Ib7cdP1ec1ACDtj-Lpc_oF5h_-mIYE3rsEDcBe-SoxnX8OQy5vYh6KI1WoaGy2hkuAH_RW4JNVWZ63QZAi-t0md2w50/s1600-rw/carnival-2100125_1280.jpg)
<input type='checkbox' id='sample_1'>
<label class='button_1' for='sample_1'>このボタンを押すと画像が表示されます。</label>
<img src="sample.jpg"/><
<style>
.button_1{
display:inline-block;
background-color:#eee;
cursor:pointer;
border:1px solid #ccc;
color:black;
padding:5px 10px;
border-radius:5px;
font-size:0.8em;
}
input[type='checkbox']{
display:none;
}
.sample-1{
display:none;
width:400px;
height:200px;
object-fit:cover;
object-position: top;
}
#sample_1:checked ~ .sample-1{
display:block;
}
</style>
transitionを使用した場合
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibvgVNVl3o3IDC4MsruSLdVlH5_oKDgq35dAKNsfOAmEjYAdSWjLgnFLVONPBE8UGTwBhqIWNwpNn08CMzX_Tuk_0UeO-PDmc2Ib7cdP1ec1ACDtj-Lpc_oF5h_-mIYE3rsEDcBe-SoxnX8OQy5vYh6KI1WoaGy2hkuAH_RW4JNVWZ63QZAi-t0md2w50/s1600-rw/carnival-2100125_1280.jpg)
.sample-2{
height:0;
transition-property:height;
transition-duration:0.3s;
}
#sample_2:checked ~ .sample-2{
height:200px;
}
解説
transitionは、要素のスタイルシートの値が変更する時に、その差分を指定した秒数で保管してアニメーションとして表示してくれる機能です。 要素のサイズだけじゃなく、位置や、色、透明度などもアニメーション化できるので、少しの変更で簡素なホームページから動きのあるホームページに様変わりさせることができます。 transition-propertyは、アニメーションを適用するcssプロパティを指定します。 この設定はしなくてもいいのですが、メモリ使用量が爆上がりする可能性があるので、できれば、指定しておいたほうが賢明です。 transition-durationは、アニメーションの実行時間です。sは秒で、msはミリ秒で指定できます。 他にも、keyframeアニメーションと同じ様にタイミングやdelayなどの指定もできるので、リファレンスサイトを眺めてみると良いでしょう。 MDN: css transitionブラウザの適用状況
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtODNNy6lw2PNB59kv6v8wCKIWcj6nxEloCsEFR5IJIS7Xc-GCbtdcirvRxYQm3WpBKETGtcwOFMtBWDhnE2ikgoHbEy6prkPDnBYq0mgNorlKGITUg660aZO7rpVLE23BSmNKV-q4H_qGOgcmltFkCrhe17jS8a3D8tRrCqoezodN5vvoDnupEM8rjdE/s1600-rw/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-04%207.52.34.png)
位置のtransition
<input type='checkbox' id='sample_3'>
<label class='button' for='sample_3'>このボタンを押すとボールが移動します。</label>
<div class='sample-3'></div><style>
.sample-3{
display:block;
width:100px;
height:100px;
border-radius:50%;
background-color:#aeddcd;
transform:translateX(0);
transition-property:transform;
transition-duration:0.3s;
}
#sample_3:checked ~ .sample-3{
transform:translateX(250px);
}
</style>
色のtransition
<input type='checkbox' id='sample_4'>
<label class='button' for='sample_4'>このボタンを押すと箱の色が変わります。</label>
<div class='sample-4'></div><style>
.sample-4{
display:block;
width:100px;
height:100px;
border-radius:5px;
background-color:#aeddcd;
transition-property:background;
transition-duration:0.3s;
}
#sample_4:checked ~ .sample-4{
background-color:red;
}
</style>
透明度のtransition
<input type='checkbox' id='sample_5'>
<label class='button' for='sample_5'>このボタンを押すと箱の透明度が変わります。</label>
<div class='sample-5'></div><style>
.sample-5{
display:block;
width:100px;
height:100px;
border-radius:5px;
opacity:1.0;
background-color:#aeddcd;
transition-property:opacity;
transition-duration:0.3s;
}
#sample_5:checked ~ .sample-5{
opacity:0.1;
}
</style>
height:autoではtransitionが使えない
ヘッダメニューなどでこのtransitionを使って、メニューの出し入れを表現したくても、transitionは、"auto"という値に対してアニメーションをしてくれません。 もちろん、サイズをpxや%などで指定すれば適用できるのですが、autoで対応するためにいくつかの裏技も存在するようです。 でも、確実に行うためには、Javascriptで対応するしかないというのも仕方がないことのようなので、簡単にコピペで使えるようにスニペットを用意しておきました。メニューにtransitionを適用
<input type='checkbox' id='sample_6'>
<label class='menu' for='sample_6'>メニューリスト▼</label>
<ul class='sample-6 menu-lists'>
<li>リスト-1</li>
<li>リスト-2</li>
<li>リスト-3</li>
<li>リスト-4</li>
<li>リスト-5</li>
</ul><style>
.menu{
display:inline-block;
background-color:#aeddcd;
padding:5px 10px;
margin-bottom:5px;
cursor:pointer;
}
.menu-lists{
display:flex;
flex-direction:column;
gap:5px;
overflow:hidden;
padding:0!important;
}
.menu-lists.sample-6{
height:0;
transition-property:height;
transition-duration:0.3s;
}
.menu-lists > *{
background-color:#aeddcd;
padding:5px 10px!important;
list-style:none!important;
text-align:center;
margin:0;
}
#sample_6:checked ~ .sample-6{
height:auto;
}
</style>
autoがサイズ指定できないので、transitionが効きません。
height:autoに適用させる裏技
.menu-lists.sample-7{
max-height:0;
transition-property:max-height;
transition-duration:0.3s;
}
#sample_7:checked ~ .sample-7{
max-height:300px;
}
メニューの内容によって、サイズが変動するため、heightに固定値を入れられない時は、max-heightに最大値をセットすることで、表示がheight:autoのままで対応できるという裏技です。
この方法のデメリットは、最大値を見極める必要があるという事です。
そして、あまりにも最大値を大きくした場合、閉じるタイミングにズレが生じてしまうため、ちょっとしたストレスが生まれる可能性があります。
簡単なJavascriptで対応
<input type='checkbox' id='sample_8'>
<label class='menu' for='sample_8'>メニューリスト▼</label>
<ul class='sample-8 menu-lists'>
<li>リスト-1</li>
<li>リスト-2</li>
<li>リスト-3</li>
<li>リスト-4</li>
<li>リスト-5</li>
</ul><style>
.menu-lists.sample-8{
height:0;
transition-property:height;
transition-duration:0.3s;
}
</style><script type='module'>
const list_area = document.querySelector('.sample-8')
document.getElementById('sample_8').addEventListener('click',(e=>{
const height = list_area.scrollHeight
const from = e.target.checked ? 0 : height
const to = e.target.checked ? height : 0
list_area.animate([
{height:`${from}px`},
{height:`${to}px`}
],{
duration: 300,
iterations : 1,
fill : "forwards"
})
}))
</script>
javascriptが難しいと思っている人には、少しハードルが高いかもしれませんが、そんなにたくさんのコードを書かなくてもheight:autoに対応するコードは書けることが分かります。
自身のメニューなどの箇所に合わせて書き換えてお使いください。
0 件のコメント:
コメントを投稿