パッとできる！Vue.jsを使ってカードの手札を広げるアニメーションを表現してみる

<template>
  <div class="container">
    <h1>Card Demo</h1>
    <div class="demo-box">
      <!-- カードを表示 -->
      <div
        class="card" :class="'card-' + i"
        v-for="i in cardNum" :key="i"
        :style="{
          'background': '#0' + colorDefined(i),
          'z-index': Number(maxNum - i)
        }">
        {{ i }}
      </div>
    </div>
    <div>
      <button class="button" @click="deckOpen()">OPEN</button>
      <button class="button" @click="deckReset()">RESET</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AnimationDemo',
  data () {
    return {
      cardNum: 20, // カードの枚数
      maxNum: 100, // カードの限界値
      maxDeg: 45, // 手札を広げる時の角度のMAX限界値
      minDeg: -45, // 手札を広げる時の角度のMIN限界値
    }
  },
  methods: {
    // 色の定義（わかりやすくしたかったので）
    colorDefined (num) {
      return ('00' + (num * 20).toString(16).toUpperCase()).substr(-2)
    },
    // 手札のオープン
    deckOpen () {
      //dummy
    },
    // 元に戻す
    deckReset () {
      //dummy
    }
  }
}
</script>

<style scoped>
.container {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.demo-box {
  width: 800px;
  height: 500px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  border: solid;
}
.card {
  position: absolute;
  width: 150px;
  height: 250px;
  border-radius: 15px;
  border: double 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: 800;
  color: white;
  transition: 0.5s;
  transform-origin: 25% 100%;
}
.button {
  cursor: pointer;
  margin: 15px;
  padding: 5px 15px;
  border: none;
  font-size: 24px;
  border: solid;
  border-radius: 5px;
}
</style>

<script>
export default {
  name: 'AnimationDemo',
  data () {
    return {
      cardNum: 20, // カードの枚数
      maxNum: 100, // カードの限界値
      maxDeg: 45, // 手札を広げる時の角度のMAX限界値
      minDeg: -45, // 手札を広げる時の角度のMIN限界値
    }
  },
  methods: {
    // 色の定義（わかりやすくしたかったので）
    colorDefined (num) {
      return ('00' + (num * 20).toString(16).toUpperCase()).substr(-2)
    },
    // 手札のオープン
    deckOpen () {
      // カードの枚数から、それぞれの角度の差分値を割り出す
      var deltaDeg = (this.maxDeg - this.minDeg) / this.cardNum
      for (var i = 0; i < this.cardNum; i++) {
        var el = document.querySelector('div.card-' + Number(i + 1))
        // 一番角度を開いた先から、差分値分Indexを掛けて、角度を割り出す
        var deg = (this.maxDeg - (i + 1) * deltaDeg)
        el.style.transform = 'rotateZ(' + deg +'deg)'
      }
    },
    // 元に戻す
    deckReset () {
      for (var i = 0; i < this.cardNum; i++) {
        var el = document.querySelector('div.card-' + Number(i + 1))
        el.style.transform = 'rotateZ(0deg)'
      }
    }
  }
}
</script>