css - 使用 om (/react) 显示隐藏的 div

Question

我使用 Om 设置了一个组件，我想在用户按下按钮时显示该组件。效果应该是div 从右边滑入。在 am Om 元素中构建它的最佳方式是什么？

我不能做一些骇人听闻的事情:

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

因为我认为 om 在 shadow dom 中设置组件，我得到一个错误:Cannot read property 'style' of null。

任何人都可以指出实现这种效果的正确方向吗？程序结构或任何提示将不胜感激。

Answer 1

简短的回答是将组件中的宽度指定为状态的函数，然后更改状态。

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

或仅有条件地渲染它，或使用类等。

当谈到动画时，让它滑动，事情有点棘手......您可以使用 CSSTransitionGroup Creating animations with Clojurescript Om

我个人觉得 CSSTransitionGroups 太繁琐，更喜欢更直接的声明方法 http://timothypratley.github.io/reanimated/#!/timothypratley.reanimated.examples重新动画的基础非常简单，可以为 om 重新创建...它会在每次渲染时更新状态以达到目标，然后停止。