CalendarBar スワイプ時のトランジションを何とか実現したい

[F88]

改善詳細 / Details of Improvement

help_wanted 案件です 🙇

基本機能には影響しないUI/UX関連の内容ですので緊急対応が必要な内容ではありません

/component/CalendarBar.vue ですが、カレンダー部分をスワイプすることで、表示内容を前後の週(など)の内容に変更することが可能です。
ただ、初期実装時ではなんの工夫もなく表示内容を変更しており、利用者(ヒト)からすれば不自然な動作だと思います。

理想的には例えばGoogleカレンダーの週間表示で次週に移動する場合、次の週の内容がスライドしてくるように、ユーザーの操作にあった自然な表現が出来ればと思っていましたが初期実装では実装しきれませんでした。

ということで、これをなんとかしたいという話です。

どなたか良い実現方法があれば御教示下さい、もちろん実装提供でも全く問題ありません。

参考(になれば)

参考までにこれまでにいくつか試してみた事がある方法と問題点についても併記しておきます。

Stepper component — Vuetify.js

v-stepper を利用すれば割と容易にそれっぽい動作になるかと思いましたし、なんとなく見た目は良い感じにはなるのですが、以下の問題を解消出来ませんでした。

• 移動させたい対象を事前に用意しておく必要がある為、100週分くらいを予め用意しようとすると動作が重くなる。耐えられないほどでは無いがいずれにせよ移動量に限界があるので却下。

CSSであれこれ

CSSの overflow: hidden を色々試してみましたが、結局動的なデータ生成に対応出来ず断念

[NEKOYASAN]

V1ではPC向けのUXの向上まで
V2～でスワイプ時のUX向上