Vue.jsでクリックされたときにCSSアニメーションを走らせたい。

Vue.js(Nuxt.js)で、ボタンがクリックされたときに
CSSの#animationを<div class="object">で発火させたいです。

v-showでtrue falseを切り替えるのではなく、methodsなどでクリック毎に実行されるようにしたいと考えています。

自分の調べ方が間違っているのか、v-showでの切り替えやtransitionを用いたものしかヒットせず、
このようにしたい場合はどうすればいいのでしょうか。

どなたかお知恵をお借りできますと助かります。

Vue
1<template>
2  <div class="object">
3    <p>Hello World!</p>
4  </div>
5  <button @click="startAnimation">click!</button>
6</template>
7
8<script>
9export default {
10}
11</script>
12
13<style scoped>
14#animation {
15  animation-direction: normal;
16  animation-duration: 1s;
17  animation-name: anim_sc;
18  animation-timing-function: ease;
19  transform: scale(1, 1);
20
21  @keyframes anim_sc {
22    50% {
23      transform: scale(0.9, 0.9);
24    }
25
26    100% {
27      transform: scale(1, 1);
28    }
29  }
30}
31</style>

行動規範の内容に同意します

回答2件

ベストアンサー

以下のコードで、ボタンクリック時にアニメーションさせることができました。
クリックするとdiv要素にanimationクラスを追加し、そのタイミングでアニメーションが起こります。

なお、クリックするたびにアニメーションを起こすには追加したanimationクラスを外す処理が必要で、それをdoAnimメソッド内のsetIntervalで行っています。
CSSでanimation-durationに1Sを指定されているので、少し余裕を持たせてdelayに1100を指定しています。

vue
1<template>
2    <div class="object" :class="{ animation: isAnim }">
3        <p>Hello World!</p>
4    </div>
5    <button @click="doAnim">click!</button>
6</template>
7
8<script>
9export default {
10  data() {
11    return {
12      isAnim: false,
13      interval: null
14    }
15  },
16  methods: {
17    doAnim() {
18      if (this.isAnim === true || this.interval !== null) {
19        return
20      }
21      // animation start
22      this.isAnim = true
23      // set interval
24      this.interval = setInterval(() => {
25        // animation stop
26        this.isAnim = false
27        // clear interval
28        clearInterval(this.interval)
29        this.interval = null
30      }, 1100)
31    }
32  }
33}
34</script>
35
36<style scoped>
37.animation {
38  animation-direction: normal;
39  animation-duration: 1s;
40  animation-name: anim_sc;
41  animation-timing-function: ease;
42  transform: scale(1, 1);
43}
44@keyframes anim_sc {
45  50% {
46    transform: scale(0.9, 0.9);
47  }
48
49  100% {
50    transform: scale(1, 1);
51  }
52}
53</style>