1日ひとつ、強くなる。content1日ひとつ、強くなる。CodePen.スライドメニュー等、アニメーション後の状態が2つしかないものの実装を考えてみる。状態=stateがいくつあるのかということは重要だと思う。メニューの表示/非表示、アコーディオンパネルの伸/縮。これらのように2つしかstateがないもの=トグルタイプを考える。どのような要素で構成されているか整理して考えてみると、トグルタイプのアニメーションの実装は、以下の4つの要素から構成されている。ユーザー操作の検知(例:clickイベントの取得)stateによる条件分岐とstateの変更(例:isOpenによる判定)DOMの操作・アニメーション(velociy.jsによるアニメーション等)DOM操作をトリガーするためのイベントの発行とリスン(例:$(window).triggerHandler(“customEvent”,()=>{}))以上4つの操作は、実行される時系列に従って並べると以下のようになる。ユーザー操作を検知(例:clickイベントの取得)→stateによって分岐(例:isOpenによる判定)→イベントのトリガー(例:$(window).triggerHandler(“customEvent”,()=>{}))→イベントのリスナー(例:$(window).on(“customEvent”,()=>{}))→DOM操作(velociy.jsによるアニメーション等)→stateの変更(例:isOpenの変更)「イベントのトリガー」は、なくても実装は出来る。次のように4つの要素を、以下のように2つにわけるとデバグが簡単になる。その理由は後半で検証する。ユーザー操作を検知(例:clickイベントの取得)→stateによって分岐(例:isOpenによる判定)→イベントのトリガー(例:$(window).triggerHandler(“customEvent”,()=>{}))イベントのリスナー(例:$(window).on(“customEvent”,()=>{}))→DOM操作(velociy.jsによるアニメーション等)→stateの変更(例:isOpenの変更)何故デバグしやすくなるか上記のように2つに分けて実装すると、どのアニメーションを実行するか(上段)のロジックと、アニメーションの内容(下段)を切り離すことが出来る。アニメーションの内容の中にさらに分岐のロジックがあると、アニメーションを使いまわすことができない。この切り離しが有効なのではないか。stateによる分岐と、stateの変更を2つに分ける点も重要である。この2つの要素が同一の単位の中にあったり、複数回登場すると、混乱するような気がする。要検証その他細々したtipsJSの中でreturn;すると、その時点で関数が終了する。jQueryイベントには名前空間を用意できる。customEvent.testイベントを発行すると、これをリスンするにはcustomEvent.testを対象としないといけない。customEventをリスンしてもダメ。複数イベントの監視は以下のように書く$window.on({customEvent1:()=>{do1},customEvent2:()=>{do2}});$window.off(“.test”);とすると.test名前空間にいるものは全てoffにする。customEventという階層構造を作っているのではない。and「customEvent.dev」ということである。「customEvent.test」、「customEvent.dev」のどちらを監視しても発動する。同様に.testを削除しても、.devを削除しても、削除される。ユーザー操作の監視をonする関数と、offする関数をわけておくと、アニメーション中だけユーザー操作を受け付けないシステムを簡単に作れる。1日ひとつ、強くなる。1日ひとつ、強くなる。(1)HomeAbout記事一覧1日ひとつ、強くなる。