dom-flash

Author: volser

demo/main.tsx

@@ -158,5 +158,17 @@ const renderOutputs = () => {
   reactRoot.render(React.createElement(React.Fragment, null, reactNode));
 };
 
+for (const el of [reactPreviewEl, quillHtmlPreviewEl, semanticHtmlPreviewEl]) {
+  new MutationObserver((mutations) => {
+    for (const m of mutations) {
+      const parent = m.target.parentElement;
+      if (!parent) continue;
+      parent.style.animation = 'none';
+      void parent.offsetWidth;
+      parent.style.animation = '';
+    }
+  }).observe(el, { characterData: true, subtree: true });
+}
+
 quill.on('text-change', renderOutputs);
 renderOutputs();

demo/styles.css

@@ -150,3 +150,12 @@ pre {
 #editor {
   min-height: 240px;
 }
+
+@keyframes dom-flash {
+  from { background-color: rgba(250, 204, 21, 0.3); }
+  to { background-color: transparent; }
+}
+
+.preview-shell * {
+  animation: dom-flash 0.6s ease-out;
+}