preface

There is an android adaptation problem. Click on the Transition animation, and there will be a slight shake after the animation is over.

solution

The problem code

After clicking on the object, add a new class named ANI to the div, and execute the animation using transition.

.thing{ transform-origin: center bottom; The transition: 0.5 s transform; &. ANI {transform: scale (1.2); }}Copy the code

solution

After I change transition to animation, I find that there is still a jitter effect. Changing the parameters a few times has similar effects. The last consideration was the rendering problem, which was solved with translate3D speeding up rendering.

The folk prescription

The folk recipe is translate3d(0,0,0), plus it solves the problem.

The key code

.thing{ transform-origin: center bottom; The transition: 0.5 s transform; &. ANI {transform: scale (1.2) translate3d (0, 0); }}Copy the code

Modified result

The jitter effect has been completely resolved as follows:

conclusion

  • Such as in the range oftranslate3d 、rotate3dSome attributes, such as hardware acceleration to improve page performance, make animation more smooth, encounter not smooth rendering, might as well try this folk remedy.

More articles

  • Check out other articles of netease Creative Department: github.com/f2e-netease…
  • Check out more of my articles: github.com/ningbonb/bl…