Vitesse - Défilement horizontal - transitionX se termine trop vite

Question

Je veux avoir une liste d'éléments, où si je passe la souris sur le côté droit, elle défile horizontalement dans la liste. Et fait de même si je plane sur le côté gauche juste dans l'autre sens.

(Et l'avenir, il montrera un compteur de combien d'articles sont laissés, et si je peux voir le dernier élément, la zone « hoverable » ne sera pas plus visible.)

I gérés avoir le défilement, mais le timing n'est pas encore bon. Je veux un effet facilité in-out:

• un peu lent au début
• plus vite au milieu (mais toujours lisible)
• bas à la fin.

J'utilise Velocity.js, voici l'exemple de code:

$(".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"); 
}); 

lien Codepen: https://codepen.io/lordblendi/pen/yzzjZR

Answer 1

Il y avait aussi une animation dans le css transition: all 0.3s ease-in-out;

Cela a causé deux au feu.

Answer 2

Easing est donnée comme points de contrôle de la courbe de Bézier cubique. Il existe de nombreuses combinaisons de ces points qui peuvent vous aider à atteindre l'effet désiré, par exemple: { easing: [.65,.17,.35,.78] }, mais je vous conseille fortement d'expérimenter vous-même sur: cubic-bezier.com. Vous pouvez comparer différentes assises et choisir celle qui vous convient le mieux!