CSS преобразование перехода возвращается при перетаскивании - PullRequest
Новая
       14

CSS преобразование перехода возвращается при перетаскивании

0 голосов
/ 20 марта 2020

Недавно я создал анимацию на основе css преобразования (translate) и перехода в сочетании с битом javascript. Анимация основана на событии mousemove в javascript, где свойство transform изменяется при каждом перемещении мыши. Дело в том, что все работает отлично, но если вы щелкнете мышью или попытаетесь что-то «перетащить» мышью, анимация начнет привязываться к точке «перетаскивания», а затем снова перейдет в предполагаемое место.

Элемент, который перемещается со свойством transform: (соответствующие атрибуты) 

transition: transform 50ms ease;
-moz-transition: transform 50ms ease;

Сценарий javascript для анимации: 

const shadowElement = document.getElementById('loginPage-terminal-shadow');

var offsetX = document.body.clientWidth / 2,
    offsetY = document.body.clientHeight / 2;

var width = shadowElement.clientWidth;
var height = shadowElement.clientHeight;
var xInterval = (width * 1 / 10) / 2;
var yInterval = height * 1 / 10;

window.addEventListener("resize", function() {
    offsetX = document.body.clientWidth / 2;
    offsetY = document.body.clientHeight / 2;
    width = shadowElement.clientWidth;
    height = shadowElement.clientHeight;
    xInterval = (width * 1 / 10) / 2;
    yInterval = height * 1 / 10;
});

var prefix = (function() {
    var styles = window.getComputedStyle(document.documentElement, ''),
        pre = (Array.prototype.slice
            .call(styles)
            .join('')
            .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
        )[1],
        dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1];
    return {
        dom: dom,
        lowercase: pre,
        css: '-' + pre + '-',
        js: pre[0].toUpperCase() + pre.substr(1)
    };
})();

document.body.addEventListener('mousemove', function() {
    var diffX = offsetX - event.clientX;
    var diffY = offsetY - event.clientY;

    var perX = diffX / offsetX;
    var perY = diffY / offsetY;

    var sftX = xInterval * perX;
    var sftY = yInterval * perY;

    shadowElement.style[prefix.css + "transform"] = "translate(" + sftX + "px, " + sftY + "px)";
});

Как вы, возможно, уже видели, я уже пытался добавить префикс поставщика в свойство transform и transition).

Анимация должна полностью игнорировать событие щелчка или перетаскивания, учитывая, что это проблема.

Дополнения: Кажется, это проблема firefox, она отлично работает на chrome.

Вот видео проблемы: https://www.dropbox.com/s/hcjp6evuvk6zm5m/problem.mkv?dl=0

...