如何在重新框架中对 dom 树进行动画处理而不重新创建整棵树？

Question

在我的重新框架应用程序中，我有一个不平凡的动画 svg。目前，每个动画“帧”都意味着重新创建整个 svg，尽管只有一个元素的

style="display: none"

设置为

style="display: inherit"

以使其可见，而另一个元素以相同的方式隐藏。

我想更改此设置，以便 svg 树仅创建一次，并且仅通过更改元素的样式来完成动画（我想这可以通过更改元素的内联样式或使用单独的样式来完成）每帧都会改变）。

最好的方法是什么？

注意我已经有两个单独的订阅：一个仅在 svg 需要更改时触发（这种情况很少见），另一种则为每个动画“帧”触发（这种情况很频繁）。

Answer 1

我现在使用拦截器来完成这项工作。每当感兴趣的事件被触发时，这个拦截器就会在 html 的 head 中交换不同的样式元素。

(ns myapp.myfile
  (:require
   [goog.dom :as gdom]
   [garden.core :as garden]))
; ...
(def highlighter
  (re-frame.core/->interceptor
   :id      :highlighter
   :before  (fn [context]
              (let [[_ event-arg] (re-frame.core/get-coeffect context :event)]
                (let [old-style (.getElementById js/document "highlighter-style-id")
                      css (garden/css [(str "#highlight-" elem-idx) {:opacity 0}])
                      new-style (gdom/createDom "style"
                                                (clj->js {:type "text/css"
                                                          :id "highlighter-id"})
                                                css)]
                  (if old-style
                    (gdom/replaceNode new-style old-style)
                    (gdom/appendChild (.-head js/document) new-style))
                  ))
              context)))

我不太确定这是在重新框架中执行此操作的惯用方法，但它确实有效，因为我的繁重 DOM 创建函数现在只需要在罕见事件上运行，而更频繁的事件现在只会导致

<style>

交换。该应用程序明显变得更加快捷。