Frame rate when using velocity is low compared with using css transform and transition

Author: subdanceCreated Jun 15, 2019Updated Feb 14, 2020

macOS latest

VelocityJS version: latest
Browser: chrome
Operating System: macOs

Checklist

Is this an issue with code?: maybe
Is this an issue with documentation?: maybe
Have you reproduced this in other browsers?: yes
Have you checked for updates?: yes
Have you checked for similar open issues?: no

overview

I am using velocity in vue.js. As vue.js document said, I combined velocity with vue transition hooks like this:

<transition
      @before-enter='beforeEnter'
      @enter='enter'
      @leave='leave'
>
      <img 
        ref='img'
        v-if='isFloatingImgShow' 
        class='floating-img' 
        src="../assets/logo.png"
>
</transition>

in css

css

.floating-img {
    position: absolute;
    right: 50%;
    bottom: 50%;
    transform: translate(50%, 50%);
}

and in my script, the enter hook call back function

enter(el, done) {
      Velocity(el, {opacity: 1}, {duration: 1000});
      Velocity(el, 
        {
          right: 0,
          bottom: 0,
          transform: ['translate(0, 0)', 'translate(50%, 50%)']
        }, 
        {
          duration: 1000, 
          delay: 3000,
        }
      );
    },

and now the question is, when the el is transforming to the bottom right of the screen, the frame rate is low, not smooth at all.

but if I use css to controll transform like this:

javascript

enter(el, done) {
      Velocity(el, {opacity: 1}, {duration: 1000, complete: () => {el.classList.add('aa')} });
    },

css

.aa {
    transition: 1000ms;
    right: 0;
    bottom: 0;
    transform: translate(0%, 0%);
  }

then every thing works pretty smooth. So is the way I use velocity went wrong that caused this?

Source: julianshapiro/velocity

View original on GitHub View discussion on GitHub