Merge pull request #49 from davidmaillo/animate-cells
Added animation to cell when a new char is inserted
This commit is contained in:
commit
6401f9187d
2 changed files with 30 additions and 1 deletions
|
@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue