開発背景

はじめはinput要素のrangeタイプのvalueを監視して、0と100のときにカレンダーをめくるようシステムを組んでいました。

しかし、直感的な操作ができないため爽快感に欠け、画面のシンプルさも損ねてしまっていたため、カーソルの動きだけで操作できるよう、div要素に対するカーソルのhoverをトリガーにすることで解決しました。

↓ rangeバージョン

機能

vueのv-forを利用してabsoluteのdivを368枚重ねた状態でスタートし、countプロパティを減らすことで1つずつdiv要素を削除していくことで、カレンダーのめくる動作を再現。

カレンダーのアニメーションはtransition-groupを用い、要素が消える瞬間にcssの@keyframesで作成したアニメーションを再生。また、属性セレクタを用い、めくられる方向で別々のアニメーションを再生。

divは左、中央、右に3等分。左divと右divへのhoverをトリガーにそれぞれ、カーソルが乗ったかのフラグの変更と、countプロパティのデクリメント。カーソルを広く動かす必要性と直感的な操作を実現。

vueのwatchを用い、countプロパティを監視して、タイマーのスタートとストップを自動化。

「もう一度？」を押すとcountプロパティを0.01秒ごとにインクリメントすることで、動きのついたカレンダーの再生成を実現。