动效7 条
本章口诀 · 动效
属性 · transform/opacity 优先+曲线 · cubic-bezier+时长 · ms
- 淡入淡出Fade Transition元素出现或消失时用淡入淡出，别硬跳
- 卡片翻转Card Flip / 3D Flip卡片翻个面看背面，像翻牌
- 列表入场过渡List Stagger Animation列表新增项时一个一个淡入进来，好看
- 进度条Progress Bar加载或上传时有个进度条跑动，告诉还要多久
- 标签页切换Tabs Transition多个内容块用标签页切换，点哪个显示哪个
- 悬停动效Hover / hover-lift让卡片在鼠标悬停（放上鼠标）时轻轻向上浮起一点，并加一点阴影，给出『可以点、有反馈』的感觉
- 轮播图Carousel / Swiper多张图片或内容可以横向滑动、或自动轮播切换