Merge pull request #49 from davidmaillo/animate-cells

Added animation to cell when a new char is inserted

src/components/grid/Cell.tsx

@@ -1,3 +1,4 @@
+import { useState, useEffect } from 'react'
 import { CharStatus } from '../../lib/statuses'
 import classnames from 'classnames'
 
@@ -7,6 +8,14 @@ type Props = {
 }
 
 export const Cell = ({ value, status }: Props) => {
+  const [cellAnimation, setCellAnimation] = useState('')
+
+  useEffect(() => {
+    if (value !== undefined) {
+      setCellAnimation('cellAnimation')
+    }
+  }, [value])
+
   const classes = classnames(
     'w-14 h-14 border-solid border-2 flex items-center justify-center mx-0.5 text-lg font-bold rounded',
     {
@@ -19,7 +28,7 @@ export const Cell = ({ value, status }: Props) => {
 
   return (
     <>
-      <div className={classes}>{value}</div>
+      <div className={`${classes} ${cellAnimation}`}>{value}</div>
     </>
   )
 }

src/index.css

@@ -1,3 +1,23 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.cellAnimation {
+  animation: revealCharCell linear;
+  animation-duration: 0.15s;
+  border-color: black;
+}
+
+@keyframes revealCharCell {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.1);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}