GH-202: Add update anomalies transitions

Author: shorodilov

src/_static/scss/presentation-common.scss

@@ -56,6 +56,7 @@ $on-primary: white;
 $secondary: #212121;
 $on-secondary: white;
 
+$invalid-data: red;
 $lost-data: orange;
 
 body {

src/_static/scss/presentation-normalization.scss

@@ -13,6 +13,56 @@
     }
   }
 
+  #update-anomalies {
+    .invalid-data {
+      position: relative;
+
+      .updated-data {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+
+  #update-anomalies.future {
+    span.fade-out {
+      opacity: 1.0;
+    }
+
+    span.fade-in {
+      opacity: 0.0;
+    }
+  }
+
+  #update-anomalies.present {
+    span.fade-out {
+      opacity: 0.0;
+      transition: $transition;
+      transition-delay: $transition-delay;
+    }
+
+    span.fade-in {
+      opacity: 1.0;
+      transition: $transition;
+      transition-delay: $transition + $transition-delay;
+    }
+
+    .invalid-data {
+      color: $invalid-data;
+    }
+  }
+
+  #update-anomalies.past {
+    .invalid-data {
+      color: $invalid-data;
+    }
+  }
+
   #deletion-anomalies.future {
     td.fade-out {
       opacity: 1.0;

src/pres/normalization/index.html

@@ -168,21 +168,39 @@ <h2>Update anomalies</h2>
           </tr>
           <tr>
             <td>acen1999</td>
-            <td class="text-center invalid-data">1</td>
+            <td class="text-center invalid-data">
+              <span class="fade-out updated-data">1</span>
+              <span class="fade-in updated-data">1</span>
+            </td>
             <td>Beginner</td>
-            <td class="invalid-data">1&nbsp;wizard&nbsp;hat</td>
+            <td class="invalid-data">
+              <span class="fade-out updated-data">1&nbsp;wizard&nbsp;hat</span>
+              <span class="fade-in updated-data">1&nbsp;wizard&nbsp;hat</span>
+            </td>
           </tr>
           <tr>
             <td>wheed1997</td>
-            <td class="text-center invalid-data">Greater than 7</td>
-            <td class="invalid-data">Intermediate</td>
+            <td class="text-center invalid-data">
+              <span class="fade-out updated-data">Almost 7</span>
+              <span class="fade-in updated-data">Greater than 7</span>
+            </td>
+            <td class="invalid-data">
+              <span class="fade-out updated-data">Intermediate</span>
+              <span class="fade-in updated-data">Intermediate</span>
+            </td>
             <td>18&nbsp;copper&nbsp;coins</td>
           </tr>
           <tr>
             <td>acen1999</td>
-            <td class="text-center invalid-data">2</td>
+            <td class="text-center invalid-data">
+              <span class="fade-out updated-data">1</span>
+              <span class="fade-in updated-data">2</span>
+            </td>
             <td>Beginner</td>
-            <td class="invalid-data">1&nbsp;wizard hat, 1&nbsp;robe</td>
+            <td class="invalid-data">
+              <span class="fade-out updated-data">1&nbsp;wizard&nbsp;hat</span>
+              <span class="fade-in updated-data">1&nbsp;wizard&nbsp;hat, 1&nbsp;robe</span>
+            </td>
           </tr>
           </tbody>
         </table>