Сделать анимацию на клик по множеству кнопок

Question

Нужно сделать анимацию по клику на кнопкам. Нашел как сделать с одной кнопкой. Решение через добавление переменной this.animated.

Но не пойму как сделать, когда есть множество одинаковых кнопок, и чтобы дергалась только та, по которой кликают. Не городить же для каждого свою переменную this.animated1, this.animated2,.. и тд. , тем более что заранее не известно сколько всего кнопок.

Как можно сделать универсально?

Vue.createApp({
    data(){
      return {
      animated: false
    }
  },
  methods: {
    myfunc(myvar) {
      // ... другой код
      this.animated = true
    }
  }
}).mount('#app');

<link href="https://unpkg.com/[email protected]/animate.min.css" rel="stylesheet" />
<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <button
    class="btn"
    :class="{'bounce animated': animated}" 
    @animationend="animated = false"
    @click="myfunc('1')" >
    btn1
  </button>
  <button
    class="btn"
    :class="{'bounce animated': animated}" 
    @animationend="animated = false"
    @click="myfunc('2')" >
    btn2
  </button>
  <button
    class="btn"
    :class="{'bounce animated': animated}" 
    @animationend="animated = false"
    @click="myfunc('3')" >
    btn3
  </button>
</div>

Answer 1

Вам ничего не мешает задавать собственное состояние для каждой кнопки. Просто массив с неопределенным количеством boolean.

Vue.createApp({
  data() {
    return {
      animated: []
    }
  },
  computed: {
    rand() {
      return Math.floor(Math.random() * 10) + 2
    }
  },
  methods: {
    myfunc(myvar) {
      // ... другой код
      this.animated[myvar] = true
    }
  }
}).mount('#app');

<link href="https://unpkg.com/[email protected]/animate.min.css" rel="stylesheet" />
<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <button class="btn" v-for="i in rand" :class="{'bounce animated': animated[i]}" @animationend="animated[i] = false" @click="myfunc(i)">
    btn{{i}}
  </button>
</div>

БЛОГ НА HUSL

Сделать анимацию на клик по множеству кнопок

Ответы (1 шт):