Как определить, произойдет ли у элемента 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(), чтобы извлечь оттуда число.

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

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