我使用以下css过渡:
cubic-bezier(0.16, 1, 0.29, 0.99)
问题是,在动画的最后,元素的速度是如此之慢,以至于人眼可以看到单个帧。
下面是一个演示问题的示例:http://jsfiddle.net/vivmaha/xu7dzrbs/
对于上述问题是否有一个共同的解决方案?
例如,我可以同时指定三次贝塞尔和最小速度吗?
我认为在动画结束时明显的缓慢(即有时被称为jank)取决于你正在动画的CSS属性。
例如,如果是left
属性被动画,那么jank-iness将是非常明显的,但如果它被在transform
属性上动画translateX
的东西所取代,那么我认为结果会更平滑。
我相信CSS触发器是一个很好的资源,因为它告诉你哪些属性触发布局, 油漆和最后构图。
除此之外,您可能需要向我们展示一个描述慢速的演示。这样我们就可以更好地判断它是与缓和曲线有关,还是与你首先要动画的属性有关。
这是解决方案的前后对比