1

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.

clo_jur
  • 1,359
  • 1
  • 11
  • 27

1 Answers1

1

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.

Community
  • 1
  • 1
Timothy Pratley
  • 10,586
  • 3
  • 34
  • 63