こういうやつやります。

スタイル

共通スタイルの設置

公式：https://ja.nuxtjs.org/api/configuration-css/

nuxt.config.jsにファイルを追加。

nuxt.config.js

  css: [
    { src: '~/assets/styles/transition.scss', lang: 'scss' },
  ],

スタイル例

公式：https://ja.nuxtjs.org/api/pages-transition/

ゆくページと来るページの遷移前・中・後スタイルをそれぞれ指定。今回は「戻る」「進む」の2パターンあるので2*3*2=12のクラスが必要です。
コメント部分は今回不要ですが、混乱しがちなので補助として書いています。

transition.scss

.next-enter-active,
.next-leave-active,
.prev-enter-active,
.prev-leave-active {
  position: absolute;
  transition: all .3s;
}

.next-enter {
  transform: translateX(100vw);
}

.next-enter-to {
  // transform: translateX(0);
}

.next-leave {
  // transform: translateX(0);
}

.next-leave-to {
  transform: translateX(-50vw) scaleX(0.5);
  filter: brightness(0.5);
}

.prev-enter {
  transform: translateX(-50vw) scaleX(0.5);
  filter: brightness(0.5);
}

.prev-enter-to {
  // transform: translateX(0);
}

.prev-leave {
  // transform: translateX(0);
  z-index: 1;
}

.prev-leave-to {
  z-index: 1;
  transform: translateX(100vw);
}

コンポーネント毎にアニメーションを設定

アニメーションを適用したい各コンポーネントにtransitionを指定。

export default {
  transition (to, from) {
    // [1] 遷移元の階層によってページめくり方向を指定
    if (from && to.path.startsWith(from.path)) {
      // [2] オブジェクトで設定する
      return {
        name: 'next',
        mode: '',
      }
    } else {
      return {
        name: 'prev',
        mode: '',
      }
    }
  },
}

[1] 遷移元の階層によってページめくり方向を指定する
transition設定には関数が利用できます。
引数からパスがとれるので比較し、より深い階層からの遷移のみ「戻る」アニメーションになるようにしました。

[2] オブジェクトで設定する
設定オブジェクトを返してトランジション設定を行います。今回はnameとmodeを指定します。

• name はトランジションの名前。
  • これが接頭辞となってページにクラスが適用されます。
• mode はトランジションのモード。
  • デフォルトではout-in、つまりゆくページの消滅と来るページの出現が順番にアニメーションします。 今回は同時に動かしたいので、空文字を返します。これはそういうルールです。

※補足：ページ遷移アニメーションは、遷移 先 のコンポーネントの設定が参照されます。遷移 元 ページの消えるアニメーションも、遷移 先 の設定を参照します。

終わり

僕からは以上です。
え、本当に終わりか、ですって？本当ですよ！Nuxt.jsはすごいですね。

100日チャレンジの245日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。

すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

245日目は、

おはようございます
245日目
・youtubeで、webサイト模写
・udemyで、javascript講座#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode

— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) February 20, 2020

私が何を知りたいのかについて、アフィリサイトを作るソフトSIRIUSをたとえて質問させていただきます。
そのため、SIRIUSとWordPressの両方を使っている人はわかりやすいかもしれません。

===============

まず、私が一番WordPressでやりたいことは『改行無視エリア』を途中で作りたいのです。
それを、SIRIUSでやるとで囲むことで『改行無視エリア』を実装できます。

SIRISUでこれを使う時はGoogle AdSenseなど改行を無視したい場合に使います。
これと同じことを、WordPressでできないかと思うのです。

しかし、WordPressでGoogle AdSenseを使いたい時ではありません。
なぜなら、実際Google AdSenseは決まったポジションにしか貼らないからです。

では、なぜ今回このような質問をしたかというと、<table>タグの直前に<style>を作り、その中でCSSを使いたいからです。
もちろん、一般的にCSSは別のスタイルシートに書くのが一般的なのは知っています。

しかし、私はよく次のことを思います。
「このテーブルタグだけに機能するCSSをすぐ編集できるように、直前にスタイルシートを記述したい」

つまり、コードは次のようなイメージです。

━━━━━━━━━━━
<style>
.bg_red {
background: red;
}
</style>
<table>
<tr><th></th><th></th></tr>
<tr><td class="red"></td><td></td></tr>
<tr><td class="red"></td><td></td></tr>
<tr><td class="red"></td><td></td></tr>
</table>
━━━━━━━━━━━

おそらく、これでも背景を赤にできるのですが１つ問題があります。
それは、<style></style >の間が行に改行が入ってしまい余計な空白ができてしまいます。
そのため、その空白をなくすために『改行無視エリア』を作れないかと思っています。

SIRIUSならを<noReturn>で囲むことで解消できます。
つまり、次のように実装することです。

━━━━━━━━━━━
<noReturn>
<style>
・・・・・
</style>
</noReturn>
━━━━━━━━━━━

これと、同じことがWordPressでもできないかと思っています。
ある一部分だけ、『改行無視エリア』を作ることはできないでしょうか？