打磨一下

功能已基本完成。如果想让应用更加“丝滑”，可以尝试下文的 css 过渡效果。

按钮过渡效果

修改 App.js:

@@ -173,7 +173,7 @@ function App() {
           <button
             className={`control-btn ${
               phase === PHASE_BREAK ? "secondary-control-btn" : ""
-            }`}
+            } ${ticking ? "pushed" : ""}`}
             onClick={toggleTimer}
           >
             {ticking ? "Pause" : seconds === 0 ? "Next" : "Start"}

修改 App.css:

@@ -2,15 +2,20 @@
   --primary-color: #f28585;
   --secondary-color: #ffa447;
   --button-bg: coral;
+  --duration: 0.8s;
+  --btn-border-width: 5px;
+  --pushed-btn-border-width: 2px;
 }
 
@@ -69,16 +74,23 @@ body {
 }
 
 .control-btn {
+  font-family: monospace, Courier, "Courier New";
   padding: 6px 25px;
   font-size: 36px;
   background-color: white;
   border: none;
-  border-bottom: solid 5px lightcoral;
+  border-bottom: solid var(--btn-border-width) lightcoral;
   border-radius: 0.5rem;
   cursor: pointer;
   color: var(--primary-color);
 }
 
+.pushed {
+  margin-top: calc(var(--btn-border-width) - var(--pushed-btn-border-width));
+  border-width: var(--pushed-btn-border-width);
+  transition: border-width 0.1s ease-out;
+}
+
 .skip-btn {
   font-size: small;
   cursor: pointer;

背景色过渡效果

修改 App.css:

 body {
   background-color: var(--primary-color);
   font-family: Geneva, Verdana, Tahoma, sans-serif;
+  transition: background-color var(--duration) ease;
 }
 
 .secondary-bg {
   background-color: var(--secondary-color);
+  transition: background-color var(--duration) ease;
 }

恭喜🎉！你已经用 React 创建了一个很不错的 Web 应用。

项目完整代码：https://github.com/Literank/lr_pomodoro

持续前进！持续学习！