Выявление скрытого div с помощью om (/ реагировать)

Question

Используя Om, я установил компонент, который я хочу раскрыть, когда пользователь нажимает кнопку. Эффект должен состоять в том, что div скользит справа. Каков наилучший способ структурировать это в проекте AM Om?

Я не могу сделать что-то хакерское, как:

(let [the-div (. js/document (.getElementById "the-div"))]
    (.setAttribute dashboard "width" "500px"))

Потому что я думаю, что om устанавливает компоненты в тени, и я получаю ошибку: Cannot read property 'style' of null,

Кто-нибудь может указать мне правильное направление для достижения этого эффекта? Структура программы или любые советы будут высоко оценены.

Answer 1

Краткий ответ - указать ширину вашего компонента как функцию состояния и изменить состояние.

[:div {:style {:width (if big? "500px" "0px")}}]

Или только условно визуализируй, либо используй класс и т. Д.

Когда дело доходит до анимации, заставляя ее скользить, все немного сложнее... Вы можете использовать CSSTransitionGroup. Создание анимации с Clojurescript Om.

Лично я нахожу CSSTransitionGroups слишком рискованно и предпочитаю более прямой декларативный подход http://timothypratley.github.io/reanimated/ Основа для реанимирования чрезвычайно проста и может быть воссоздана для всех... он обновляет состояние каждого рендера к целевой цели и затем останавливается.