nuxt/vueのページ遷移時にclassが付与されるtransitionについて質問です。
css
1.page-enter-active, .page-leave-active { 2 transition: opacity 1s 3} 4.page-enter, .page-leave-to { 5 opacity: 0 6}
routerを通してページが遷移する際、opacityをつけたいとして上記のようなcssを書いたとします。
cssを設定しなかった場合、リンクをクリックしたと同時に次のページの内容に切り替わると思うのですが、
・リンクをクリックするとhtmlは現ページのままopacityが1秒間かけて0になり、
次のページのhtmlに切り替わるとopacityが1秒間かけて1になる。
この理屈がよくわからないです。
本来リンクがクリックされたら遷移先のhtmlにすぐ切り替わるので、
・リンクをクリックするとhtmlが切り替わると同時にopacityが1秒間かけて0になっていく。
の方が処理として正しいと思うのですが、、
なぜcssのデュレーションの秒数を書くとアニメーションが綺麗に終わるまで待ってくれるのでしょうか?
nuxt/vueのtransitionの機能はページ遷移時にcalssを付与するだけでなく、裏でページ読み込みをデュレーション時間分ずらす。のような処理がなされているのでしょうか?
そもそもの認識が間違っているのでしょうか。。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。