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

【问题标题】：Velocity - Horizontal scroll - transitionX ends too fast速度 - 水平滚动 - transitionX 结束太快
【发布时间】：2017-10-10 01:40:48
【问题描述】：

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

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

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

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

我使用 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 链接：https://codepen.io/lordblendi/pen/yzzjZR

【问题讨论】：

标签： javascript jquery css animation velocity.js

【解决方案1】：

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

【讨论】：

是的，我明白了。但即使我将缓动设置为线性，动画中也会出现跳跃。所以我不确定这实际上是因为我设置了宽松。

【解决方案2】：

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

这导致了两个火灾。

【讨论】：