プラグイン・JQuery不使用！ Nuxt.jsでイメージスライダーを自作してみた

こんにちは。株式会社まちいろのフロントエンドエンジニア（仮）の日高です。
最近、案件でNuxt.js、Vue.jsを扱うことが増えてきました。

Nuxt.jsでたまに困るのが、プラグインJSがうまく動かないパターンです。相性なのかうまく動かないパターンが何回かありました。
また、コードはJavaScriptで記載しているので、JQueryが混在することに違和感を感じることも…

そこで、どうにかNuxt.jsとCSSを駆使してイメージスライダーができないかな？と試してみました。

Nuxt.jsコード

イメージスライダーで表示する画像をデータに格納しておきます。

data: {
  imgSlider:['/img/no1.png','/img/no2.png','/img/no3.png']
}

画面側はNuxt.jsのtransitionを使ってコードを記載します

<transition name="slider">
    <div class="l_slider" v-for="e in slider" :key="e.id">
      <p class="img" :style="background-image: url(${e.imgUrl})"></p>
    </div>
</transition>

イメージスライダーなのでX秒後に画像を差し替えるようさらにJSを組んでいきます。

data: {
  slider:['/img/no1.png','/img/no2.png','/img/no3.png'],
  visible_content: 0,
  timer: null
}
methods: {
  onTimer() {
    // 8秒間隔でnextSlider関数を呼び出し
    this.timer = setInterval(() => { this.nextSlide(); }, 8000);
  },
  nextSlide() {
    // 現在の表示位置（visible_content）を1つずつカウントアップしていく
    this.visible_content = this.visible_content < this.slider.length - 1
                            ? (this.visible_content += 1) : 0;
  }
},
mounted() {
  // ページをmountする際にタイマーを開始
  this.onTimer();
},

ここまで書いたら、sliderで設定した画像が8秒ごとに表示されるのが確認できます。スライダーっぽいアニメーションは全くなく、ただ表示が切り替わるのみです。

アニメーションをつける

イメージスライダーのアニメーションはCSSで作り込んでいきます。

.l_slider {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  .img {
    height: 100%;
    width: 100%;
    background-size: cover;
    animation: slider ease-in 0.7s forwards, scale ease-in 20s 1s forwards,
        opacity ease-in 1s 7.5s forwards reverse;
  }
}
@keyframes slider {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes scale {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.5);
  }
}
@keyframes opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.imgのanimationのみで動きは表現しています。
slideで右から左へ、scaleで拡大、opacityで登場これらを組み合わせてスライダーを表現しています。

transitionのプロパティを応用する

transitionは状態によってCSSクラスが書き換わります。

Enter/Leave とトランジション一覧 — Vue.js

enterとleaveを組み合わせることで例えば以下のようなCSSも作ることができます。

.slide-enter-active {
  transition: all 3s;
}
.slide-enter {
  opacity: 0;
}
.slide-enter-to {
  opacity: 1;
}

Nuxt.js × CSS

transition、CSSアニメーション、JS（timer）を駆使すれば、イメージスライダーはJSプラグインやJQueryを使う必要が無くなります。

CSSを変えることで、レスポンシブにも対応できます。
スライダー速度やアニメーション速度も自由に変更することが可能です。

アニメーションCSSはkeyframesをテンプレート化しておくと、再利用可能で便利になります。
私は、opacity、scaleは必ず先にkeyframesとして準備しておきます。