速度 - 水平滚动 - transitionX 结束得太快

Question

我想要一个项目列表，如果我将鼠标悬停在右侧，它会水平滚动列表。如果我将鼠标悬停在另一个方向的左侧，也会执行相同的操作。

（未来，它会显示剩余物品数量的计数器，如果我能看到最后一项，"hoverable" 区域将不再可见。）

我成功滚动了，但时机还不成熟。我想要一个缓入缓出的效果：

开始有点慢
中间速度更快（但仍可读）
最后很低。

我使用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");
});

Codepen link: 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;

这引起了两起火灾。

速度 - 水平滚动 - transitionX 结束得太快

Velocity - Horizontal scroll - transitionX ends too fast

javascript

css

jquery

animation

velocity.js