Aufdecken eines versteckten Div mit om (/ react)

Question

Mit Om habe ich eine Komponente eingerichtet, die ich enthüllen möchte, wenn ein Benutzer eine Taste drückt. Der Effekt sollte sein, dass das div von rechts eingeht. Was ist der beste Weg, dies in meinem Om-Projekt zu strukturieren?

kann ich nicht tun etwas hacky wie:

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

Weil ich denke, om legt die Komponenten im Schatten dom, und ich erhalte eine Fehlermeldung: Cannot read property 'style' of null.

Kann mir jemand in die richtige Richtung zeigen, diesen Effekt zu erreichen? Programmstruktur oder irgendwelche Tipps würden sehr geschätzt werden.

Answer 1

Die kurze Antwort besteht darin, die Breite in Ihrer Komponente als eine Funktion des Status anzugeben und den Status zu ändern.

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

nicht oder nur bedingt machen, oder eine Klasse verwenden usw.

Wenn es um die Animation kommt, ist es Dia zu machen, sind die Dinge ein wenig kompliziert ... Sie einen CSSTransitionGroup verwenden können Creating animations with Clojurescript Om

persönlich finde ich CSSTransitionGroups zu fummelig, und es vorziehen, einen direkteren deklarativen Ansatz http://timothypratley.github.io/reanimated/#!/timothypratley.reanimated.examples Die Basis reanimiert für ist extre mely simple und könnte für om neu erstellt werden ... es aktualisiert den Status jedes Rendern in Richtung eines Zielziels und stoppt dann.