Andy-0414/vue-roller

Performance issues

Closed this issue · 1 comments

og2t commented

Hi!

Thanks for this fantastic library!

It works great although it slows down a lot on mobile.
Can I suggest using GPU accelerated transform: translateY() rather than top?

vue-roller/src/components/Roller/RollerItem.vue

Line 72 in 1451117

<div class="roller-item__wrapper__list" :style="{ top, transition: `top ${duration}ms` }">

arily commented 
const top = computed(() => {
  if (!isReady.value) {
    if (prevTargetIdx.value !== -1)
      return `-${prevTargetIdx.value / charSet.value.length * 100}%`
    return '0%'
  }
  if (targetIdx.value === -1)
    return `-${1 / charSet.value.length * 100}%`
  return `-${targetIdx.value / charSet.value.length * 100}%`
})
<div class="roller-item__wrapper__list top-[25%]" :style="{ transform: `translateY(${top})`, transition: `transform ${duration}ms` }">

rewrote the top calculator
it's sooo smooth now
top-[-25%] is a tailwind class and you can change it as top: -25%

  • ❤️1