Animate task count number when it changes 🔢
维护者通常 2 天内回复
评估
- 难度
- 1/5
- 预计耗时
- 1-3 小时
- 新手友好度
- 95/100
- Issue 类型
- 功能
- 描述清晰度
- 描述清楚
- 活跃度
- 活跃
- 技术栈
- javascript, react, tailwindcss
- 领域
- frontend
调研方向
从client/src/pages/Dashboard.jsx入手,找到导航栏中的任务计数 span。使用 issue 提出的useState、useRef和useEffect方案,在tasks.length变化时触发动画;然后确认计数仍能正确显示,并且动画类会在超时后移除。
由索引模型根据 Issue 内容生成。
描述
Animate task count number when it changes 🔢
File: client/src/pages/Dashboard.jsx
Task count in navbar just instantly
changes with no animation 💀 fr!!
Fix:
const [countAnim, setCountAnim] = useState(false)
const prevCount = useRef(tasks.length)
useEffect(() => {
if (prevCount.current !== tasks.length) {
setCountAnim(true)
setTimeout(() => setCountAnim(false), 400)
prevCount.current = tasks.length
}
}, [tasks.length])
<span className={text-xs transition-transform ${countAnim ? 'scale-125 text-purple-400' : 'text-[#666]'}}>
{tasks.length} tasks
~8 lines! No backend needed 🎯
- 主要语言
- JavaScript
- 星标
- 39
- 派生
- 105
- 平均合并
- 1 天 13 小时
- 30 天内合并 PR
- 41
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 没有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
anoopcodehack/DevBoard 的其他 Issue
-
good first issue
难度 1/5 1 小时以内 新手友好度 96/100
anoopcodehack/DevBoard#639 ·
维护者通常 2 天内回复
-
Improve tags input placeholder with examples 🏷️可能已有人在做 @SwatiManjari 于 1 天前认领。 未关闭good first issue
难度 1/5 1 小时以内 新手友好度 96/100
anoopcodehack/DevBoard#638 ·
维护者通常 2 天内回复
-
good first issue
难度 1/5 1 小时以内 新手友好度 96/100
anoopcodehack/DevBoard#637 ·
维护者通常 2 天内回复
-
Show current task name in browser tab during Pomodoro ⏱️可能已有人在做 @SwatiManjari 于 1 天前认领。 未关闭good first issue
难度 1/5 1 小时以内 新手友好度 95/100
anoopcodehack/DevBoard#636 ·
维护者通常 2 天内回复
-
enhancement good first issue
难度 2/5 1-3 小时 新手友好度 70/100
anoopcodehack/DevBoard#630 ·
维护者通常 2 天内回复
查看 anoopcodehack/DevBoard 的全部 Issue
相似的 Issue
-
enhancement
难度 2/5 1-3 小时 新手友好度 68/100
ericcornelissen/depreman#591 ·
维护者通常 1 天内回复
-
难度 1/5 1 小时以内 新手友好度 88/100
NanmiCoder/dsh-agent-teams#269 ·
维护者通常 1 天内回复
-
难度 1/5 1 小时以内 新手友好度 65/100
维护者通常 1 天内回复
-
docs
难度 2/5 1-3 小时 新手友好度 82/100
idean3885/claude-ops-agent#765 ·
维护者通常 1 天内回复
-
docs html v6
难度 1/5 1 小时以内 新手友好度 78/100
维护者通常 1 天内回复