Question

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

（未来，它会显示剩下多少项目的计数器，如果我能看到最后一项，那么＆＃34; hoverable＆＃34;区域将不再可见。）

我设法滚动，但时机还不错。我想要一个轻松的效果：

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

我使用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

Answer 1

给出Easing作为三次贝塞尔曲线的控制点。这些点的许多组合可以帮助您实现所需的效果，例如：{ easing: [.65,.17,.35,.78] }，但我强烈建议您自己进行实验：cubic-bezier.com。你可以在那里比较不同的缓和，并选择最适合你的东西！

Answer 2

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

导致两人开火。

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

2 个答案: