Как определить, произойдет ли у элемента css transition? Метод стандартной библиотеки или алгоритм

199
10 октября 2017, 05:56

Необходимо удалить элемент со страницы. Сейчас на этот элемент навешивается обработчик события transitionend, коллбэк которого (удаление элемента) срабатывает, когда transition завершается.

Проблема в том, что пользователь сам решает, нужны ему переходы (transitions) или нет. И если пользователь решил, что не нужны и не добавил их в стили, то, соответственно, событие transitionend никогда не случится и элемент никогда не будет закрыт.

В первую очередь я предположил, что навешивание хоть какого-нибудь transition решит проблему (пусть даже duration === 0), но, как оказалось, даже в данном случае событие не происходит.

Поэтому я решил, что сначала нужно как-то определить, есть ли вообще у элемента такое css-свойство. И, если его нет, то удалять элемент сразу, без навешивания обработчика transitionend.

Проблема в том, что я не знаю, как это сделать. Порыв немного интернет выяснил (не знаю правда, насколько информация актуальна), что встроенного метода для проверки нет.

Возможно, сейчас уже ситуация изменилась. Но, если нет, то прошу предоставить примерный алгоритм функции определения.

Answer 1

Как оказалось, алгоритм довольно прост: необходимо всего лишь получить высчитанные стили для элемента при помощи window.getComputedStyle(e), после чего проверить свойство transitionDuration полученного объекта, чтобы оно было больше 0. Если это так, то навесить обработчик transitionend. В противном случае удалить элемент без обработчика.

Небольшое замечание: время, содержащееся в этом свойстве является строкой, оканчивающейся на "s" или "ms". Поэтому придется воспользоваться функцией window.parseInt(), чтобы извлечь оттуда число.

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

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

READ ALSO
Корректные модальные окна для мобилок

Корректные модальные окна для мобилок

Подскажите плагин модального окна для мобильных устройств на js, который:

174
Не могу понять как решить задачу в javascript

Не могу понять как решить задачу в javascript

В книге Моргана Ника имеется задача в конце главы об объектах

681
Как преобразовать jq в чистый js?

Как преобразовать jq в чистый js?

Есть код, который использует jqНе хотелось бы загружать библиотеку , только из-за нескольких строк кода

252
Задача на вывод числа прописью. JS

Задача на вывод числа прописью. JS

Задача в том, что бы можно было ввести число (от 0 до 1 000 000 000) и функция возвращала то число прописьюНапример: 128 -> сто двадцать восемь

288