Обходной путь для CSS прослушивания событий перевода, когда не требуется - PullRequest
Новая
       8

Обходной путь для CSS прослушивания событий перевода, когда не требуется

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

Я работаю над сайтом и имею серию переходов для определенного элемента на странице. Я помещаю слушателя в свой элемент с обратным вызовом, когда он завершает свой первый переход. CSS для первого перехода выглядит следующим образом. 

/* translation specs. for when the shape moves to the centre */
    -webkit-transition-property: left, -webkit-transform;
    -webkit-transition-duration: 3.0s, 3.0s;
    -webkit-transition-delay: 0.2s, 0.2s;
    -webkit-transition-timing-function: ease-in-out;
    -moz-transition-property: left, -webkit-transform;
    -moz-transition-duration: 3.0, 3.0s;
    -moz-transition-delay: 0.2s, 0.2s;
    -moz-transition-timing-function: ease-in-out;
    -ms-transformtransition-property: left, -webkit-transform;
    -ms-transformtransition-duration: 3.0s, 3.0s;
    -ms-transformtransition-delay: 0.2s, 0.2s;
    -ms-transformtransition-timing-function: ease-in-out;
    transition-property: left, transform;
    transition-duration: 3.0s, 3.0s;
    transition-delay: 0.2s, 0.2s;
    transition-timing-function: ease-in-out;

Проблема заключается в том, что преобразование заканчивается до движения влево и происходит несколько событий "transitionend". Это не будет проблемой, за исключением того факта, что я помещаю новый слушатель события в форму (чтобы прослушать переход класса, который я затем добавляю к нему) сразу после первого события "transitionend". Впоследствии левый «transitionend» запускает его. Единственное, что я смог определить в качестве охранника для этого, это что-то вроде нижеприведенного в обратном вызове в JS

shape.addEventListener('transitionend', function handler() {
        if (event.propertyName === "left") { return }
       // do actual stuff below this guard
       // ...
}

Проблема в том, что я не могу использовать «левую» охрану, потому что У меня есть другие типы событий, которые мне нужно вызвать, и их propertyName «left», что совпадает с ложноположительным событием, описанным выше.

Я просмотрел ключи события и не смог ничего найти это помогло бы мне различить это. Конечно, идеальным решением было бы добавить ключ к переходу от JS перед добавлением имени класса к элементу, чтобы вызвать его, но я не знаю, как это сделать, или если это вообще возможно. Кроме этого, единственное решение, которое я могу придумать, - это задержка setTimeout (), но она небрежная и хакерская, а не то, что я особенно хочу использовать.

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

1 Ответ

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

Не могли бы вы использовать счетчик, чтобы отслеживать, на какое событие вы хотите отреагировать? Это предполагает, что события всегда происходят в одном и том же порядке. 

let counter = 0;
let targetTransitionIndex = X;
shape.addEventListener('transitionend', function handler() {
    if (counter == targetTransitionIndex) { 
   // do actual stuff below this guard
   // ...
    }
   couter++;
}
...