search

Andy-0414 / vue-roller

number & string rolling counter
http://andy-0414.github.io/vue-roller
69 stars 8 forks source link

Performance issues #41

Closed og2t closed 1 year ago

og2t commented 1 year ago

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?

https://github.com/Andy-0414/vue-roller/blob/14511175a18474618827418b43e615003ce7e542/src/components/Roller/RollerItem.vue#L72

arily commented 1 year ago 
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%