速度 - 水平滚动 - 过渡 X 结束得太快

Question

我想要一个项目列表，如果我将鼠标悬停在右侧，它会在列表中水平滚动。如果我将鼠标悬停在左侧的另一个方向上，也会做同样的事情。

（将来，它将显示剩余项目数量的计数器，如果我能看到最后一个项目，"可悬停"区域将不再可见。

我设法进行了滚动，但时机还不好。我想要一个缓入效果：

• 一开始有点慢
• 中间更快（但仍然可读）
• 最后低。

我使用Velocity.js，这是代码示例：

$(".tab__more").hover(function(){
  var max_width = parseInt($('.tabs__nav').css('max-width'));
  var $tablist = $(".tabs__nav ul");
  var listItems = $tablist[0].children;
  var widths = 0;
  for(var i = 0; i < listItems.length; i++)
    {
      widths += parseInt($(listItems[i])[0].scrollWidth);
    }
  var scrollWidth = (widths-max_width+10)*-1 + 'px';
  $(".tabs__nav ul").velocity({translateX: scrollWidth}, { duration: 5000, easing: [0.52,0.15,0.7,0.95] });
}, function(){
  $(".tabs__nav ul").velocity("stop");
});
$(".tab__less").hover(function(){
  $(".tabs__nav ul").velocity({translateX: 10}, { duration: 5000, easing: [0.52,0.15,0.7,0.95] });  
}, function(){
  $(".tabs__nav ul").velocity("stop");
});

代码笔链接：https://codepen.io/lordblendi/pen/yzzjZR

Answer 1

缓动作为三次贝塞尔曲线的控制点给出。这些点有许多组合可以帮助您达到预期的效果，例如：{ easing: [.65,.17,.35,.78] }，但我强烈建议您自己尝试：cubic-bezier.com。您可以在那里比较不同的缓和，并选择最适合您的一种！

Answer 2

css 中还有一个动画 transition: all 0.3s ease-in-out;

这导致两人开火。