ハンバーガー作りの続き。右端からスライドインするアニメーションの後、右に余白が増えちゃうにゃ。

動かなかったのはjsファイル指定のダブルクォート閉じ忘れだった。
ダウンロードしたサンプルは動いたけどなんで自分で書いて既存のページに埋め込んだのは動かないのか差分をちまちま調べてなかなか時間かかってしまった。
html文法検査してくれる高級なエディタを使うべきか。本にはVisual Studio Codeが良いとか書いてある。はじめて聞いたそれ。

それで一応メニューを開いたり閉じたり動いたけどスマホ(Android/Chrome)で表示が崩れちゃう。ダウンロードしたサンプルそのままでもスマホで表示が崩れちゃうじゃん。こりゃいかん。
崩れちゃうというのは、メニューを開くとき、右端からメニューがスライドして現れるアニメーションの後、右端の枠外にメニューと同じサイズの余白が足されてしまって画面におさまりきらない結果、全体が縮小表示されてしまう。

アニメーションの指定をやめると大丈夫。何が起きてるのか。
メニューが開くとき、アニメーションの途中、一時的に右端にメニューがはみ出た状態となって全体幅が大きくなり、スマホではアニメーション終了後に全体幅が再調整されないということか。
よく見るとPC(Win10/Chrome)でもアニメーションの途中、一時的に横スクロールバーが出現するので全体幅が大きくなっているようだ。（アニメーション終了後にスクロールバーは消える）
これも美しくない。

正統な解決を求めるならアニメーションの途中でも右端にはみ出ないようなスタイル指定が必要そうだけど、そんな指定あるのかな。
世にあふれてるちゃんと食べれるハンバーガーはどうなってるのかしら。
vue.js使わなくてもできると思われるので、vue.jsとアニメーションCSSの相性問題なのか。
だとしたらわざわざvue.js使ってまずいハンバーガ作ったこの本の失点。僕は勉強になってるので感謝。

次はvue.jsつかわないおいしそうなハンバーガー情報を探してみよう。そうそう、モスのビーガンバーガーというのがあるっぽいのでチェックしてみよう。