javascript - 如何让我的 javascript 动画更快？

Question

我制作了一个 Vue 组件来在 X 轴上制作 div 循环。但我注意到它使用了大量的CPU。我按照我想要的方式工作，但我想优化它。我怎样才能让我的动画更快。 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://v2.vuejs.org/v2/guide/transitions.html