grid.column.AnimatedChange: cellRenderer() => toggle animation class #6536

Author: tobiu

resources/scss/src/grid/column/AnimatedChange.scss

@@ -0,0 +1,25 @@
+@keyframes grid-animated-cell-1 {
+    50%  {background-color:var(--button-ripple-background-color);}
+}
+
+@keyframes grid-animated-cell-2 {
+    50%  {background-color:var(--button-ripple-background-color);}
+}
+
+.neo-grid-container {
+    .neo-grid-row, .neo-grid-row.neo-even {
+        .neo-grid-cell {
+            &.neo-animated-1 {
+                animation-name           : grid-animated-cell-1;
+                animation-duration       : .4s;
+                animation-timing-function: ease-in-out;
+            }
+
+            &.neo-animated-2 {
+                animation-name           : grid-animated-cell-2;
+                animation-duration       : .4s;
+                animation-timing-function: ease-in-out;
+            }
+        }
+    }
+}

src/grid/column/AnimatedChange.mjs

@@ -1,4 +1,5 @@
-import Column from './Base.mjs';
+import Column   from './Base.mjs';
+import VdomUtil from '../../util/VDom.mjs'
 
 /**
  * @class Neo.grid.column.AnimatedChange
@@ -30,11 +31,13 @@ class AnimatedChange extends Column {
      * @param {Number|String}      data.value
      * @returns {*}
      */
-    cellRenderer({value}) {
-        return {
-            cls : ['neo-animated-change', 'neo-grid-cell'],
-            html: value
-        }
+    cellRenderer({dataField, gridContainer, record, value}) {
+        let {view} = gridContainer,
+            cellId = view.getCellId(record, dataField),
+            node   = VdomUtil.find(view.vdom, cellId)?.vdom,
+            cls    = !node ? [] : node.cls.includes('neo-animated-1') ? ['neo-animated-2'] : ['neo-animated-1'];
+
+        return {cls, html: value}
     }
 }