Using Om, I've set up a component that I want to reveal when a user presses a button. The effect should be that the div slides in from the right. What is the best way to structure this in am Om project?
I can't do something hacky like:
(let [the-div (. js/document (.getElementById "the-div"))]
(.setAttribute dashboard "width" "500px"))
Because I think om sets up the components in the shadow dom, and I get an error: Cannot read property 'style' of null.
Can anyone point me in the right direction of achieving this effect? Program structure or any tips would be much appreciated.
The short answer is to specify the width in your component as a function of state, and change the state.
[:div {:style {:width (if big? "500px" "0px")}}]
Or only conditionally render it, or use a class etc.
When it comes to animation, making it slide in, things are a little tricky... You can use a CSSTransitionGroup Creating animations with Clojurescript Om
Personally I find CSSTransitionGroups too fiddly, and prefer a more direct declarative approach http://timothypratley.github.io/reanimated/#!/timothypratley.reanimated.examples The basis for reanimated is extremely simple and could be recreated for om... it updates state every render toward a target goal and then stops.