Fork me on GitHub
#reagent
<
2021-04-29
>
Stuart13:04:15

I have some registers in a map, e.g.

{:a 5 :b 6 :c 7}
And I have a last-edit-register property,
:last-edit-register :a
I build a table to show these registers and can highlight the last edit-register as yellow.
(defn registers []
  (let [registers @(rf/subscribe [:registers])
        last-edit-register @(rf/subscribe [:last-edit-register])]
    [:div.registers-container
     [:div.registers-header "Registers"]
     [:div.registers-list
      (when (not= registers {})
        (for [[k [name v]] (zipmap (range (count registers)) registers)]
          [:div.row {:key k}
           [:div.col-col-lg6.register-name {:key (str k "reg:name")} name]
           (if (keyword-identical? name last-edit-register)
             [:div.col-col-lg6.register-value {:id (str "reg" name) :key (str k "reg:value")
                                               :style {:background-color :yellow}}
              v]
             [:div.col-col-lg6.register-value {:id (str "reg" name) :key (str k "reg:value")} v])]))]]))
Is their a way that I can not set the background yellow, but instead just "flash" it yellow. So maybe just have the background yellow for 1/4 sec or 1/2 second? I don't know what terms to lookup to know what I need to do here. Any pointers of what to look into?

p-himik13:04:45

Look up "CSS animations". Maybe "CSS animations with React". It's a rather extensive topic.

Stuart13:04:12

thank you!