Цикл анимации или активный класс через цикл Vue JS

Question

Я уже создал этот эффект в старом приложении vanilla js. У меня есть серия блоков с анимацией при наведении курсора, и, когда нет парения, анимация циклически сменяется блок за блоком.

Я перестроил все приложение в Vue js, а все остальное было многоПолегче. Это единственная часть приложения, в которой я изо всех сил пытаюсь сделать «Vue» без каких-либо манипуляций с домом. Обычно у меня есть 3-секундный таймаут, когда компонент получает «активный» класс, а затем класс переключается на следующий компонент в v-for.

Есть предложения?

Answer 1

Вам просто нужно представить соответствующее состояние, используя свойства в data. Всякий раз, когда вы испытываете желание манипулировать DOM напрямую, просто обновите какое-то состояние и подключите его к шаблону соответственно.

Надеюсь, эта демонстрация сделает то, что вы хотите:

new Vue({
  el: '#app',
  
  data () {
    return {
      active: 0,
      
      items: [
        'Red',
        'Green',
        'Blue',
        'Yellow'
      ]
    }
  },
  
  mounted () {
    this.startTimer()
  },
  
  destroyed () {
    this.stopTimer()
  },
  
  methods: {
    onMouseEnter (index) {
      this.stopTimer()
      this.active = index
    },
    
    onMouseLeave () {
      this.startTimer()
    },
    
    startTimer () {
      if (this.timerId) {
        return
      }
    
      this.timerId = setInterval(() => {
        this.active = (this.active + 1) % 4
      }, 500)    
    },
    
    stopTimer () {
      clearInterval(this.timerId)
      this.timerId = null
    }
  }
})

ul {
  border: 1px solid #777;
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
  padding: 5px;
}

.active {
  background: #ccf;
}

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>

<div id="app">
  <ul>
    <li
      v-for="(item, index) in items"
      :key="item"
      :class="{ active: active === index }"
      @mouseenter="onMouseEnter(index)"
      @mouseleave="onMouseLeave"
    >
      {{ item }}
    </li>
  </ul>
</div>