如何使我的 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