速度 - 横スクロール - トランジションXがあまりに速く終わる

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リンク：https://codepen.io/lordblendi/pen/yzzjZR

Answer 1

2が起動する原因とCSSでアニメーション transition: all 0.3s ease-in-out;

もありました。

Answer 2

イージングは​​立方ベジェ曲線の制御点として与えられます。たとえば、{ easing: [.65,.17,.35,.78] }のような効果を得るのに役立つこれらの点の組み合わせはたくさんありますが、自分で試してみることを強くお勧めします。cubic-bezier.comさまざまなイージングを比較して、最適なものを選ぶことができます！