mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-26 12:10:06 +08:00
41 lines
1.5 KiB
Markdown
41 lines
1.5 KiB
Markdown
|
# Page transition
|
|||
|
|
|
|||
|
|
- category: Animation
|
|||
|
|
- chinese: 单页面转场
|
|||
|
|
- order: 2
|
|||
|
|
- nodemos: true
|
|||
|
|
---
|
|||
|
|
###单页面转场动画
|
|||
|
|
|
|||
|
|
从内容A到内容B的转变过程时能有效的吸引用户注意力，突出视觉中心，提高整体视觉效果。
|
|||
|
|
|
|||
|
|
####视觉连贯性
|
|||
|
|
|
|||
|
|
####三类元素（Adding ,Receding,Normal)
|
|||
|
|
|
|||
|
|
Adding: 新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。
|
|||
|
|
|
|||
|
|
Receding: 与当前页无关的信息元素应采用适当方式移除
|
|||
|
|
|
|||
|
|
Normal: 指那些从转场开始到结束都没有发生变化的信息元素
|
|||
|
|
|
|||
|
|
|
|||
|
|
· 大页面转场可采用淡入淡出的形式
|
|||
|
|
|
|||
|
|
· 小的信息元素排布最好根据一定的路径层次依次进场 区分维度层级 来凸显量级
|
|||
|
|
|
|||
|
|
####可折叠面板
|
|||
|
|
|
|||
|
|
对于信息元素内容区域的延伸，显示信息元素和进一步内容对象之间的直接连接。被展开的信息区域内容按照一定的路劲依次进场。信息元素在收起时在视觉上整齐划一。
|
|||
|
|
|
|||
|
|
####对象展开
|
|||
|
|
|
|||
|
|
信息元素被扩大发现其隐藏的内容,通过缩放对象的遮罩来显示隐藏的内容。这样可减少页面新的信息元素（Incoming)的增加，直接从页面本身的信息元素来做变形可提高用户对新内容的认知和识别。
|
|||
|
|
|
|||
|
|
####弹出框动效
|
|||
|
|
|
|||
|
|
从一个触发点触发一个弹出框时，弹框从所触发区域弹出，且触发区域视觉上基本保持不变。这样让触发区域和弹出区域有所关联，提高用户对新内容的认知。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|