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?Look up "CSS animations". Maybe "CSS animations with React". It's a rather extensive topic.
thank you!