2018-2-8 00:27
vue

簡単なショーケース演出

概要

  • 画像が一定時間で切り替わるビューを作る。
  • トランジションはフェード。
  • 画像は img は使わないで background で表示する。
    • size:cover を使いたい。(object-fitはieが。。。)

結果

スクリプト

メモ

  • 画像
    • 画像URLの配列からv-forで生成。その際インデックスを付けておく。
    • 表示するスライドのインデックスをv-ifを使用し変数で指定。
<div v-for="(image, index) in images" 
        v-if="index===selectedIndex" 
        :key="index" 
        :style="{background: 'no-repeat center/cover url(' + images[index] +')'}"> 
</div>
  • トランジション
    • mode="in-out"で新しい画像を表示してから古い画像を消すようにする
<transition name="fade" mode="in-out">
...
</transiton>
  • オート
    • setIntervalで一定時間毎に表示するスライドのインデックスを変更する

全体

showcase.vue

<template> <div class="showcase"> <transition name="fade" mode="in-out"> <!-- 新しい方を表示してから古い方を消す --> <div class="image" v-for="(image, index) in images" v-if="index===selectedIndex" <!-- インデックスを元に表示する画像を指定 --> :key="index" :style="{background: 'no-repeat center/cover url(' + images[index] +')'}"> <!-- 背景画像にバインド --> </div> </transition> </div> </template> <script> export default { data () { return { selectedIndex: 0, // 表示する画像のインデックス images: ['画像URL', '画像URL', ... '画像URL'] // 画像URLの配列 } }, created () { setInterval(function () { if (this.selectedIndex++ >= this.url.length - 1) { this.selectedIndex = 0 } }.bind(this), 8000) } } </script> <style lang="scss"> .showcase { height: 100vh; width: 100vw; .image{ position: absolute; height: 100%; width: 100%; } } .fade-enter-active, .fade-leave-active { transition: opacity 1s; } .fade-enter, .fade-leave-to { opacity: 0; } </style>