Javascript анимация без jquery

Question

Я играю с this сайтом в течение дня, и я действительно борюсь в одном. Я могу легко изменить анимацию, когда я изменяю function move, так что если стоп отрицательный -stop-(-stop*delta)+"px" и он работает. несколько .. для easeOut(bounce) он работает хорошо. Но когда я использую линейные элементы, они возвращаются в позицию, которую я определяю как остановку, а затем с линейным эффектом возвращается к предыдущей позиции. Может ли кто-нибудь помочь мне, как легко отменить анимацию, которую она РАБОТАЕТ?

Спасибо!

Answer 1

Я хотел бы сделать несколько замечаний на вас код:

• вам следует добавить везде ; после конца строки. Это хорошая практика.
• в вашем случае для исправления вы должны установить start: 0 вместо start: 200. Это необходимо потому, что вы установили item элемент как style="left:200px"

Так оно и должно быть

document.getElementById('item').onclick = function (e) { 
    e.target.move({ 
     direction: "left", 
     delta: linear, 
     stop: -200, 
     duration: 600, 
     start: 0 // instead of 200 
    }); 
}; 

Вот мой jsfiddle

Answer 2

Я сделал это JSFIDDLE.

Javascript

var max = false; 

function move(elem) { 


    var left = 0 

    if(max) 
     left = 100; 
    function frame() { 

     if(!max) 
     { 
    left++ // update parameters 
     } 
     else 
     { 
     left-- 
     } 

    elem.style.left = left + 'px' // show frame 

    if (left == 100) // check finish condition 
    { 
     clearInterval(id) 
     max = true; 
    } 
     if(max == true && left == 0) 
     { 
        clearInterval(id) 
     max = false; 
     } 
    } 

    var id = setInterval(frame, 10) // draw every 10ms 

    };