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