[Nuxt]レイアウトの切り替えに重宝する layoutTransition プロパティ
- 公開日時
nuxt で異なるレイアウトファイルを使ったページ間の遷移の際に <transition> コンポーネントが使えず困っていました。 同一レイアウトの遷移はフェードイン / アウトで入れ替わるのにレイアウトが異なるときはパッと切り替わってしまったり。
nuxt で異なるレイアウトファイルを使ったページ間の遷移の際に <transition> コンポーネントが使えず困っていました。 同一レイアウトの遷移はフェードイン / アウトで入れ替わるのにレイアウトが異なるときはパッと切り替わってしまったり。
lazysizes を使用してレスポンシブ対応しながら背景画像を遅延読み込み(lazyload)する方法です。
マウスカーソルのポインターをカスタマイズしてリンクにホバーするとポヨンと変形するようなもの。クールなサイトでたまに見かけますね。
Nuxt.js にて SSR かブラウザの処理かを判定する方法として『process.browser で分岐する』というものがよく知られているかと思います。
iOS11 Safari までは問題なかったはずですが、iOS12 にアップデートしたら clip-path の css transition が効かなくなってしまいました。(途中のトランジションがなくて始点・終点でパッと切り替わるという状態)
フロントエンド専門。フリーランスで10年以上活動しています。