2016-11-30 1 views
0

Я создаю интерфейс с React, и я хотел бы получить свойства контейнера div (clientWidth и clientHeight) после того, как я изменил класс.Получить ближайшие свойства перехода CSS

Основная проблема заключается в том, что для свойств width/height существует переход на 0.2s для 0.2s, поэтому всякий раз, когда я пытаюсь обнаружить (будущую) модификацию DOM благодаря React (with componentDidMount) или с MutationObserver, m получить clientWidth и clientHeight прямо перед началом перехода.

В идеале, я хотел бы получить свойства, которые будут применяться после перехода, чтобы я мог повторно представлять подкомпоненты и дать им будущую ширину/высоту, в которой они нуждаются.

Есть ли хороший способ сделать это? Я заранее благодарю :)

ответ

0

Вы можете написать триггер для CSS перехода конца: https://davidwalsh.name/css-animation-callback

Таким образом, вы можете ждать с высоты и ширины обнаружения до этого события.

+0

Thanks Martin P.! Но это не чудесное решение, о котором я мечтал: D Это действительно хорошее решение для обнаружения конца перехода, но я хочу знать, существует ли какая-либо возможность узнать, ПЕРЕД началом перехода (в мой случай) ширина/высота клиента в пикселях элемента, которые будут эффективными. Я сомневаюсь, что любое решение существует, но кто знает, я пробовал свой шанс в этой теме. Но я по-прежнему ценю ваше решение, это может быть полезно для близких проблем! :) – elTaan

+0

Хорошо, теперь я все понимаю. Это то, что вы ищете: document.getElementById ("yourId"). GetBoundingClientRect(). Height; –

+0

Извините, вы по-прежнему не хватает его @ martin-p: D Ik как получить размеры элемента (** clientWidth/clientHeight ** ie) То, что я хотел получить, это ширина и высота _future_, которые собираются быть эффективными ** после этого переход начинается и заканчивается ** Вот как я подвел итоги: ** обнаружено событие класса ** -> ** обнаружен переход ** -> _вычислимые свойства и который можно получить для распространения в режиме React_ -> **, начинается ** -> ** воспроизведение детей начинает синхронно с правильными «будущими» свойствами ** -> ** заканчивается переход; endings для детей ** – elTaan

Смежные вопросы