Как я могу сделать мою javascript анимацию быстрее?

Question

Я сделал компонент Vue, чтобы сделать div для l oop по оси X. Но я заметил, что он использует много процессора. Я работаю так, как хочу, но хочу оптимизировать. Как я мог сделать мою анимацию быстрее. Элементы galeryItems перемещаются по оси x, и когда они достигают ширины родительского элемента div, они перемещаются на другую сторону. Так что продолжайте цикл. Я бы предпочел не использовать внешние плагины.

<template>
    <div class="placeholder">
      <div class="galery" ref="galery">
          <div class="galery-item" v-for="i in 10" :key="i" ref="galeryItems" />
      </div>
    </div>
</template>

<script>
export default {
    props:{
      xoffset : {
        type: Number,
        default: 0,
      },
      speed : {
        type: Number,
        default: 1,
      },
      spaceBetween : {
        type: Number,
        default: 50,
      },
    },
    data() {
      return {
      }
    },
    mounted(){
      for(let i = 0; i < this.$refs.galeryItems.length; i++)
        this.$refs.galeryItems[i].style.transform = 'translateX(' + (this.$refs.galeryItems[i].clientWidth + this.spaceBetween) * i + 'px)';
      this.animate();
    },
    methods:{
      animate(){
        window.requestAnimationFrame(this.animate);
        for(let i = 0; i < this.$refs.galeryItems.length; i++)
        {
          let galeryItemRect = this.$refs.galeryItems[i].getBoundingClientRect();
          if(galeryItemRect.x > this.$refs.galery.clientWidth)
          {
            this.$refs.galeryItems[i].style.transform = 'translateX(' + -galeryItemRect.width + 'px)';
            continue;
          }

          this.$refs.galeryItems[i].style.transform = 'translateX(' + (galeryItemRect.x + this.speed) + 'px)';
        }
      }
    }
}
</script>

<style lang="scss" scoped>
.placeholder{
  height: 100vh;
  display: flex;
  align-items: center;
}

.galery
{
  position: relative;
  background-color: green;
  height: 100px;
  width: 100%;
  overflow: hidden;
}

.galery-item{
  display: block;
  position: absolute;
  background-color: black;
  height: inherit;
  min-width: 100px;
  transition: 0s;
}
</style>

Answer 1

попробуйте использовать внешний плагин, он лучше по производительности и качеству, в vue.js используйте параметры фреймворка, такие как v-animate и transition по ссылке ниже:

https://vuejs.org/v2/guide/transitions.html