Nuxt.jsのtransitionタグの扱い方について

Question

Nuxt.jsを用いたWebサイトの制作をしています。
今回ページ遷移時に黒いブロックが下から上に覆い尽くすようなアニメーションを実装したいのですが、どのようにtransitionタグを使ったらいいかで詰まってしまいました。

transitionタグをつけなければ

.page-enter-active, .page-leave-active{
  transition: all .3s ease-out;
}
.page-enter, .page-leave-active{
  opacity:0;
  transform:translateY(-10px);
}

この記述だけでdefault.vueの<nuxt />の部分だけがフェードで切り替わることは確認できたのですが、それだとtransitionタグを使っていないのに何故<nuxt />の部分に対してクラスが付与されたのでしょうか？

<Header />
<nuxt />
<Footer />

また

<transition name="test">
 <div class="bg-black"></div>
</transition>
<style>
.bg-black{transition:all .3s ease}
.bg-black.test-enter-active{top:20px}
</style>

たとえば、bg-blackという要素に対してページ遷移時にclassを付与しようとしてもcalssがつきませんでした。
何か書き方が間違っているのでしょうか？　そもそも考え方が違うのでしょうか。。
アドバイスをいただけると幸いです。
よろしくお願いいたします。

Answer 1

Nuxtには、ページ移動時のトランジションを設定するAPIが用意されています。

デフォルトのトランジションのnameがpageなので、CSSを設定するだけで動いているように見えます。

<nuxt>コンポーネントにトランジションが含まれていると考えればよいです。

公式サイト

Comments

[okpk]

回答ありがとうございます。
なるほどデフォルト設定が"page"としてあるので、cssに書けば動くのですね。

では、最後に書いたコードが動かない原因などわかりますでしょうか。。

[NozomuIkuta]

コードが断片なので、確証がないですが、以下が原因だと思います。

transition componentは、デフォルトでは初回表示でアニメーションしません。それ以降の表示切替でアニメーションします。

初回表示でアニメーションさせるには、appear属性を追加してください。

公式サイト
https://jp.vuejs.org/v2/guide/transitions.html#%E5%88%9D%E6%9C%9F%E6%8F%8F%E7%94%BB%E6%99%82%E3%81%AE%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B8%E3%82%B7%E3%83%A7%E3%83%B3

[okpk]

度々すみません。現在のdefault.vueの内容になります。
<template>
<div>
<Mouse />
<opening />
<Header />
<nuxt/>
<Footer />
<transition appear name="test">
<div class="bg-block"></div>
</transition>
</div>
</template>

これでページ遷移時、bg-blockというdiv要素にtest-enter-active等のクラスが付与されると思っていたのですが、考え方がそもそも違うのでしょうか。

[NozomuIkuta]

"bg-black" と "bg-block" でスペルミスだと思いますが、違いますか？

[okpk]

追記を書いていましたが、削除しました。

[okpk]

追記を書いていましたが、削除しました。

[okpk]

ありがとうございました。
appearで初期時もclass付与ができる点を学習できました。

疑問に思っている点がまだあり、質問内容も少し変わりそうなので一旦この件解決にさせていただきます。