使用 in (/react) 显示隐藏的 div
revealing a hidden div using om (/react)
我使用 Om 设置了一个组件，我想在用户按下按钮时显示该组件。效果应该是div从右边滑入。在 am Om 项目中构建它的最佳方式是什么？
我不能做像这样的骇人听闻的事情：
(let [the-div (. js/document (.getElementById "the-div"))]
(.setAttribute dashboard "width" "500px"))
因为我认为 om 在影子 dom 中设置组件，我得到一个错误：Cannot read property 'style' of null。
任何人都可以指出实现此效果的正确方向吗？程序结构或任何提示将不胜感激。
简短的回答是将组件中的宽度指定为状态的函数，然后更改状态。
[:div {:style {:width (if big? "500px" "0px")}}]
或仅有条件地渲染它，或使用 class 等
说到动画，要滑动进去，事情有点棘手...
您可以使用 CSSTransitionGroup
Creating animations with Clojurescript Om
我个人觉得 CSSTransitionGroups 太繁琐，更喜欢更直接的声明方法
http://timothypratley.github.io/reanimated/#!/timothypratley.reanimated.examples
重新动画的基础非常简单，可以为 om 重新创建...它会在每次渲染时更新状态以达到目标，然后停止。
我使用 Om 设置了一个组件，我想在用户按下按钮时显示该组件。效果应该是div从右边滑入。在 am Om 项目中构建它的最佳方式是什么？
我不能做像这样的骇人听闻的事情：
(let [the-div (. js/document (.getElementById "the-div"))]
(.setAttribute dashboard "width" "500px"))
因为我认为 om 在影子 dom 中设置组件，我得到一个错误：Cannot read property 'style' of null。
任何人都可以指出实现此效果的正确方向吗？程序结构或任何提示将不胜感激。
简短的回答是将组件中的宽度指定为状态的函数，然后更改状态。
[:div {:style {:width (if big? "500px" "0px")}}]
或仅有条件地渲染它，或使用 class 等
说到动画，要滑动进去，事情有点棘手... 您可以使用 CSSTransitionGroup Creating animations with Clojurescript Om
我个人觉得 CSSTransitionGroups 太繁琐，更喜欢更直接的声明方法 http://timothypratley.github.io/reanimated/#!/timothypratley.reanimated.examples 重新动画的基础非常简单，可以为 om 重新创建...它会在每次渲染时更新状态以达到目标，然后停止。