如何在重新帧动画dom树没有重新创建整个树?

Question

在我的重帧应用程序中，我有一个非平凡的svg动画。目前，每一个动画帧意味着重新创建整个svg，尽管只有一个元素的style="display: none"被设置为style="display: inherit"以使其可见，而另一个元素以相同的方式隐藏。

我想改变这一点，所以svg树只创建一次，动画是通过改变元素的风格来完成的(我想这可以通过改变元素的内联风格来完成，或者通过使用一个单独的每帧改变)。

最好的方法是什么?

注意:我已经有了两个独立的订阅:一个只在svg需要更改时触发(这种情况很少见)，另一个为每个动画帧触发;(这是经常的)。

Answer 1

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

(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>交换。