Как сделать что бы при клике мыши анимация останавливалась?

Question

[andreyiginov]

Здравствуйте! Есть самописный код на чистом JavaScript(е), который "допиливает" функционал плагину Before/After для WordPress(а). Пытаюсь своими "кривыми руками" сделать анимацию для Хэндла, что бы он при загрузке страницы появлялся и двигался влево/вправо(в рамках ограниченной ширины), до тех пор пока на него не кликнуть мышью. В целом анимация работает более менее так как нужно, но не получается остановить её при клике мыши. Помогите пожалуйста, буду рад любой помощи!

function Animation(click) {
    if (click == false) {
        document.getElementsByClassName('cd-handle')[0].style.left = '60%';
        document.getElementsByClassName('cd-handle')[0].style.transition = '2s';
        document.getElementsByClassName('cd-resize-img')[0].style.width = '60%';
        document.getElementsByClassName('cd-resize-img')[0].style.transition = '2s';

        function Obratno () {
            document.getElementsByClassName('cd-handle')[0].style.left = '50%';
            document.getElementsByClassName('cd-resize-img')[0].style.width = '50%';
        }
        setTimeout (Obratno,2000);
    }

}

setInterval(Animation, 4000, click = false);

var tracker = document.getElementsByClassName('cd-handle')[0];
tracker.onclick = function() {
        Animation(click = true);
        clearTimeout(Animation);
        document.getElementsByClassName('cd-handle')[0].style.transition = 'none';
        document.getElementsByClassName('cd-resize-img')[0].style.transition = 'none';
    }

Answer 1

[andreyiginov]

Решил проблему. Вот код:

var click = false;
function Animation() {
    if (click == false) {
        document.getElementsByClassName('cd-handle')[0].style.left = '60%';
        document.getElementsByClassName('cd-handle')[0].style.transition = '2s';
        document.getElementsByClassName('cd-resize-img')[0].style.width = '60%';
        document.getElementsByClassName('cd-resize-img')[0].style.transition = '2s';
        function Obratno () {
            if (click == false) {
                document.getElementsByClassName('cd-handle')[0].style.left = '50%';
                document.getElementsByClassName('cd-resize-img')[0].style.width = '50%';
            }
        }
        setTimeout (Obratno,2000);
    }
}
if (click == false) {
    setInterval(Animation, 4000, click);
}
var tracker = document.getElementsByClassName('cd-handle')[0];
tracker.onmousedown = function() {
        mouse_x = window.event.clientX;
        fullwidth = document.documentElement.clientWidth;
        curr_mouse = mouse_x/fullwidth * 100;
        document.getElementsByClassName('cd-handle')[0].style.left = curr_mouse+"%";
        document.getElementsByClassName('cd-resize-img')[0].style.width = curr_mouse+"%";
        document.getElementsByClassName('cd-handle')[0].style.transition = 'none';
        document.getElementsByClassName('cd-resize-img')[0].style.transition = 'none';
        window.click = true;
    }

Answer 2

[hzzzzl]

CSS : animation-play-state

Comments

[andreyiginov]

Ух ты, огромное спасибо!

Answer 3

[Александр]

Почитайте Web Animations API

Comments

[andreyiginov]

Спасибо! Уже ознакамливаюсь!

Answer 4

[Дуболом Одноклеточный]

Ты остановил свойство transition, а не анимацию. Задай всем свойствам параметр 0:
left: 0, transition: none, width: 100%.
Либо если хочешь чтобы анимация заканчивалась плавно, просто напиши в click = true { transition: 1s }например*

Comments

[andreyiginov]

Спасибо за помощь!

[Дуболом Одноклеточный]

Андрей Игинов, Помогло?

[andreyiginov]

В данном случае, нет. Просто проблема в другом, а именно в том что цикл повторяется.