交互与动效

交互生硬、页面「死气沉沉」，来这里。 动效不是装饰，是沟通：告诉用户「发生了什么、东西从哪来、我点到了没」。

什么时候来查

按钮点了没反馈感，页面切换很突兀
列表、弹窗出现/消失的方式很生硬
想知道一个动效该用多长时间、什么缓动
想给页面加「手感」，但不知道从哪下手

文章列表

文章	回答的问题
动效设计原则	什么时候该动？动多久？用什么节奏？
CSS 动画基础	transition 和 animation 怎么选怎么写？
微交互清单	按钮/输入/反馈，各有哪些现成方案？
Vue Transition 实战	Vue 里怎么优雅地做入场退场？

推荐学习顺序

动效设计原则 —— 先建立「何时机、多长久、什么节奏」的判断力
CSS 动画基础 —— 掌握两个核心工具
Vue Transition 实战 —— 框架里的标准姿势
微交互清单 —— 当速查表用，随用随查

本站就是示例

这个知识库本身的动效基调是「生动明显」：首页卡片错峰入场、hover 上浮、页面切换淡入。打开首页感受一下，再看 motion-principles 里对应的时间参数——理论立刻有了对照物。