些細な日常

JavaScriptのイベントのtransitionendとanimationendはそれぞれにCSSのtransitionとanimationの終了を検出する。なので後者を使うときに前者も一緒に使うとサイトで連動する動作を簡単に実現するプログラムが組める。 Metal gears by Bill Oxford / Unsplash 一般的にメニューをスライドしたり、ボタンをフェードしたりするなどの コンテンツのアニメーションを介した表示と非表示の切り替え に役立つ。 transitionendイベントでtransitionを捕捉する 何かをCSSのtransitionで動かしたら当のHTML要素をJavaScriptのaddEventListener()メソッドのtransitionendで補足して連動して別の状態に持って行くのが簡単な使い方だ。 transformとaddEventListene…

JavaScriptで関数などを遅らせて実行する時間差の処理に使えるsetTimeout()メソッドと間隔を空けて繰り返せるsetInterval()メソッドには共通するパフォーマンスの問題があって避けるためにはどちらもrequestAnimationFrame()メソッドで置き換えることができる。 目次 requestAnimationFrameはジャンクを防ぐ requestAnimationFrameはイベントループに強い アニメーションの始動と時間通りの実行に向く requestAnimationFrameに時間を設定して使う 二秒後に実行して即座に停止するサンプル 一秒間隔で実行して十秒で停止するサンプル requestAnimationFrameはジャンクを防ぐ アニメーションの処理に利点があってサイトの表示を良好に保ち易くするのがrequestAnimationFrame()メソッドの大きな…

CSSのアニメーションで動きを止めるのはanimation-delayで、繰り返して動かすのはanimation-iteration-countだけれどもそれらを組み合わせても幾らか間隔を空けながら繰り返すことはできない。 というのはanimation-delayはアニメーションが始まるまでの時間を取っているだけだからだ。最初の動きが終わって二回目以降の動きが始まる直前には関与しないし、止めることはできないものなんだ。 動きに間隔を空ける@keyframesの使い方 繰り返しの途中で止まって見える、または繰り返さなくてもそのように一回だけ動く間に表現するにはCSSアニメーションの流れを指定する@keyframesを使うのが相応しい。 CSS の @keyframes @-規則は、アニメーションの流れに沿ったキーフレーム (または中間地点) のスタイルを定義することによって、一連の CSS アニメ…

サイトのハンバーガーメニュー（≡）などのコンテンツを出し入れできる開閉ボタンをJavaScriptで作成するプログラムには二つの大きな部分がある。 要素のクリックを判定する コンテンツに表示変更を行う JavaScriptのプログラムではクリックを判定するHTMLの要素を取得した上で、イベントハンドラのonclickからさらに表示変更を行うコンテンツにCSSのdisplayのnone（非表示）のようなデザインのclassをclassListプロパティのtoggle()（交互）メソッド、またはadd()とremove()（追加と削除）の二つのメソッドで付け替えて開閉ボタンを作成することができる。 目次 開閉ボタンのJavaScriptの基本的なソースコード ハンバーガーメニューのサンプル HTMLのonclick属性を使う場合 JavaScriptのaddEventListener()メソッドを使う場合 c…