10

我一直在寻找如何在 Om 中创建动画，我尝试创建一个 RaphaelJs 组件并取得了一定的成功。我得到了我想要的动画，但由于某种原因，Om 渲染了 SVG 元素的多个实例。

在此处输入图像描述

查看Om github 文件夹中的动画示例，用于setInterval更改您想要动画的值，这不太理想。

我知道 CSSTransitionGroup 插件，但看起来你只能在 CSS 中定义的预设动画之间切换，你不能决定做一些事情，比如渲染路径并在随机时间后跟随它的形状。如果您可以使用它动态定义动画，请随时纠正我。

有没有人有任何执行简单动画的好例子？只需平移或旋转简单的形状，我就会知道如何从那里开始处理它。

4

2 回答 2

12

您可以使用 CSSTransitionGroup 为位置/移动、方向和其他视觉属性设置动画，例如不透明度、颜色、边框或阴影（可能使用关键帧）或更复杂的技巧。这种方法的主要限制是它只允许您动画安装和卸载组件，然后只能通过 CSS 中定义的动画。

如果您需要在组件的安装生命周期内对其进行动画处理，或者您希望对可以动画的内容进行更细粒度的控制，您可能需要采用另一种方法，例如我在这段代码中所做的。

这就是您使用 Om 的 CSSTransitionGroup 的方式。

为此，您需要使用with-addonsReact 的版本（例如react-with-addons-0.12.1.js或react-with-addons-0.12.1.min.js）。

(def css-trans-group (-> js/React (aget "addons") (aget "CSSTransitionGroup"))) 
(defn transition-group
  [opts component]
  (let [[group-name enter? leave?] (if (map? opts)
                                     [(:name opts) (:enter opts) (:leave opts)]
                                     [opts true true])]
    (apply
      css-trans-group
      #js {:transitionName group-name
           :transitionEnter enter?
           :transitionLeave leave?}
      component)))

然后要使用它，您可以执行以下操作：

(transition-group "example" (when visible? (om/build my-component data)))

现在切换visible?到动画my-component被安装和卸载。如果要禁用进入或离开动画：

(transition-group
  {:name "example"
   :enter false} ; Only animate when component gets unmounted, not when mounted
  (when visible? (om/build my-component data)))

您还可以为项目列表添加或删除动画：

(transition-group "example" (om/build-all my-component list-of-data))

或者使用地图，也许是这样的：

(transition-group "example" (map #(dom/li %) list-of-data))

您还需要添加正确的 CSS：

.example-enter {
  opacity: 0.01;
  transition: opacity .5s ease-in;
}

.example-enter.example-enter-active {
  opacity: 1;
}

.example-leave {
  opacity: 1;
  transition: opacity .5s ease-in;
}

.example-leave.example-leave-active {
  opacity: 0.01;
}

请注意，除非您禁用其中一个动画，否则您需要将两者都包含在 CSS 中。例如，如果你省略了leave动画，那么你的组件可能不会被卸载，因为 React 会挂起等待动画完成。{:leave false}简单的解决方法是使用或在 CSS 中包含离开动画来禁用它。

另一个需要注意的问题：如果过渡组安装在 children 之前，这只会为子组件设置动画。如果孩子和过渡组同时挂载，那么它们将不会被动画化。这有时会有点尴尬。例如，上面的代码片段如果没有(when visible? ...)as 没有切换就不会动画，孩子将与过渡组同时挂载。此外，如果没有预先填充，而是在安装后填充，build-all下面的示例效果最好。list-of-data出于这个原因，CSSTransitionGroups 最适用于在视图/组件或用户修改的数据列表之间切换的代码，但不适用于在页面加载时为组件的初始显示设置动画。

也许是这样的：

(transition-group "view-selection"
  (condp = current-view
    "home" (om/build home-page data)
    "blog" (om/build blog-page data)
    "about" (om/build about-page data)
    :else (om/build error-404-page data)))

-

最后，如果你不想使用辅助函数，你可以css-trans-group直接使用：

    (css-trans-group
      #js {:transitionName "example"}
      (when visible? (om/build my-component data)))))

或者，如果使用子组件列表（例如通过map或build-all）：

    (apply
      css-trans-group
      #js {:transitionName "example"}
      (om/build-all my-component list-of-data))))

我还没有使用过低级的 TransitionGroup API。更多信息可以在React CSSTransitionGroup 页面上找到。

于 2014-11-25T13:04:13.157 回答
2

关心查看https://github.com/chenglou/react-tween-state或https://github.com/chenglou/react-state-stream的 ClojureScript 端口吗？

TransitionGroup 只提供挂钩一些生命周期事件的助手。从理论上讲，它与动画无关。如果你想要一个真正的动画 API，看看我上面做的两件事。自述文件应为其余部分提供足够的信息。

于 2015-02-19T16:52:30.450 回答