Revert "feat: add animation when visible changes" (#487)

.gitignore

@@ -25,8 +25,7 @@ yarn-error.log*
 .eslintcache
 package-lock.json
 pnpm-lock.yaml
-
 .env
 stats.html
 
-.idea
+.idea

src/pages/Typing/components/WordPanel/components/Word/Letter.module.css

@@ -1,21 +0,0 @@
-.letter {
-  display: inline-flex;
-  flex-direction: column;
-  transition: transform 0.2s ease-in-out;
-}
-
-.letter::after {
-  content: '_';
-  display: block;
-}
-
-.letter > span {
-  height: 50%;
-}
-
-.letter-visible {
-  transform: translateY(0%);
-}
-.letter-hide {
-  transform: translateY(-50%);
-}

src/pages/Typing/components/WordPanel/components/Word/Letter.tsx

@@ -1,4 +1,3 @@
-import s from './Letter.module.css'
 import { EXPLICIT_SPACE } from '@/constants'
 import React from 'react'
 
@@ -25,13 +24,11 @@ export type LetterProps = {
 
 const Letter: React.FC<LetterProps> = ({ letter, state = 'normal', visible = true }) => (
   <span
-    className={`m-0 h-14 overflow-hidden p-0 font-mono text-5xl font-normal ${
+    className={`m-0 p-0 font-mono text-5xl font-normal ${
       stateClassNameMap[(letter === EXPLICIT_SPACE) as unknown as string][state]
     } pr-0.8 duration-0 dark:text-opacity-80`}
   >
-    <span className={`h-28 ${s.letter} ${visible ? s.letterVisible : s.letterHide}`}>
-      <span>{letter}</span>
-    </span>
+    {visible ? letter : '_'}
   </span>
 )