ant-design/design/page-transition.md
2015-07-06 11:32:52 +08:00

2.2 KiB
Raw Blame History

页面转换

  • category: 动画
  • order: 1

###单页面转场动画

从内容A到内容B的转变过程时能有效的吸引用户注意力突出视觉中心提高整体视觉效果。

####视觉连贯性

####三类元素Adding ,Receding,Normal)

Adding:  新加入的信息元素应被告知如何使用,从页面转变的信息元素需被重新识别。

Receding:  与当前页无关的信息元素应采用适当方式移除

Normal: 指那些从转场开始到结束都没有发生变化的信息元素

转场动画

大页面转场可采用左出右入的形式

小的信息元素排布或块状较多的情况下,最好根据一定的路径层次依次进场,区分维度层级,来凸显量级,间隔时间为动画时间的三分之一;

如不是单页面,页面动画可以为只右入和间隔性出现;

####可折叠面板

对于信息元素内容区域的延伸,显示信息元素和进一步内容对象之间的直接连接。

1.被展开的信息区域内容按照一定的路劲依次进场。

2.信息元素在收起时照收齐点移动,在视觉上跟随关闭物体。

####弹出框动效

从一个触发点触发一个弹出框时,弹框从所触发区域弹出,且触发区域视觉上基本保持不变。这样让触发区域和弹出区域有所关联,提高用户对新内容的认知。