我制作了一个 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>
最佳答案
尝试使用外部插件,它的性能和质量更好,在vue.js
中使用v-animate
和transition
等框架选项> 在下面的链接中:
关于javascript - 如何让我的 javascript 动画更快?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60230740/