Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wanjj_1210
ant-design
提交
0673ba9d
A
ant-design
项目概览
wanjj_1210
/
ant-design
与 Fork 源项目一致
从无法访问的项目Fork
通知
10
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
A
ant-design
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
0673ba9d
编写于
8月 03, 2015
作者:
J
jljsj
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
更新转场新增按钮交互与更新motion里的select
上级
9917f925
变更
3
显示空白变更内容
内联
并排
Showing
3 changed file
with
49 addition
and
29 deletion
+49
-29
components/tabs/index.jsx
components/tabs/index.jsx
+1
-0
spec/motion.md
spec/motion.md
+17
-7
spec/page-transition.md
spec/page-transition.md
+31
-22
未找到文件。
components/tabs/index.jsx
浏览文件 @
0673ba9d
...
...
@@ -20,3 +20,4 @@ AntTabs.defaultProps = {
AntTabs
.
TabPane
=
Tabs
.
TabPane
;
export
default
AntTabs
;
spec/motion.md
浏览文件 @
0673ba9d
...
...
@@ -28,6 +28,11 @@ Ant Design 提供了一些预设的组件动画样式。
`````
jsx
var
cssAnimation
=
require
(
'
css-animation
'
);
var
Select
=
antd
.
Select
;
var
Option
=
Select
.
Option
;
var
OptGroup
=
Select
.
OptGroup
;
var
motions
=
[];
motions
=
motions
.
concat
([[{
name
:
'
淡入
'
,
...
...
@@ -182,7 +187,7 @@ motions = motions.concat([[{
var
leave
=
'
-leave
'
;
var
Test
=
React
.
createClass
({
handleChange
(
e
)
{
var
value
=
e
.
target
.
value
;
var
value
=
e
;
if
(
value
){
this
.
demoNode
.
style
.
visibility
=
''
;
cssAnimation
(
this
.
demoNode
,
value
,
()
=>
{
...
...
@@ -198,19 +203,20 @@ var Test = React.createClass({
},
render
()
{
var
options
=
[<
option
value
=
""
>
请选择预设动画
</
o
ption
>].
concat
(
motions
.
map
(
function
(
m
)
{
var
options
=
[<
Option
value
=
""
>
请选择预设动画
</
O
ption
>].
concat
(
motions
.
map
(
function
(
m
)
{
var
opts
=
m
.
map
(
function
(
m2
)
{
return
<
option
value
=
{
m2
.
value
+
"
-
"
+
m2
.
direction
}
>
{
m2
.
name
+
"
"
+
m2
.
value
}
</
o
ption
>
return
<
Option
value
=
{
m2
.
value
+
"
-
"
+
m2
.
direction
}
>
{
m2
.
name
+
"
"
+
m2
.
value
}
</
O
ption
>
});
return
<
optgroup
label
=
{
m
[
0
].
type
}
>
{
opts
}
</
optg
roup
>;
return
<
OptGroup
label
=
{
m
[
0
].
type
}
>
{
opts
}
</
OptG
roup
>;
}));
return
<
div
>
<
div
className
=
"motion-container"
>
<
div
ref
=
"demo"
className
=
"motion-example"
></
div
>
</
div
>
<
div
className
=
"motion-select"
>
<
select
onChange
=
{
this
.
handleChange
}
>
{
options
}
</
s
elect
>
<
div
className
=
"motion-select
-wrapper
"
>
<
Select
value
=
""
className
=
'motion-select'
onChange
=
{
this
.
handleChange
}
>
{
options
}
</
S
elect
>
</
div
>
</
div
>;
}
});
...
...
@@ -237,8 +243,12 @@ React.render(<Test/>, document.getElementById('components-motion-demo-basic'));
font-weight: bold;
background: url(https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg) center/230px;
}
.motion-select
{
.motion-select
-wrapper
{
text-align: center;
}
.motion-select {
text-align:left;
width:180px;
}
</style>
spec/page-transition.md
浏览文件 @
0673ba9d
#
转换动画
#
互动转换
-
category: 动画
-
order: 1
---
### 视觉连贯性三元素
-
Adding: 新加入的信息元素应被告知如何使用,从页面转变的信息元素需被重新识别。
-
Receding: 与当前页无关的信息元素应采用适当方式移除。
-
Normal: 指那些从转场开始到结束都没有发生变化的信息元素。
## 转场动画
从内容A到内容B的转变过程时能有效的吸引用户注意力,突出视觉中心,提高整体视觉效果。
## 响应互动
-
大页面转场可采用左出右入的形式
。
响应交互一般是指我们在浏览页面时,点击元素时动画给我们视觉上的反馈,每个交互动效都能给我们带来不同视觉效果
。
-
小的信息元素排布或块状较多的情况下,根据一定的路径层次依次进场,区分维度层级,来凸显量级,来指引用户的视觉轨迹
。
比如:按钮上的 hover 或 click 效果,随着你的鼠标事件而改变自身或增加元素在按钮上,或者折叠面板和弹出框,点击后给你呈现新加入的信息元素
。
<script
src=
"/static/TweenMax.min.js"
></script>
<script
src=
"/static/motion.js"
></script>
### 按钮反馈
<div
class=
"video-player"
>
<video
preload
loop
><source
src=
"https://t.alipayobjects.com/images/rmsweb/T1
4q0hXbBdXXXXXXXX.webm"
type=
"video/webm"
><source
src=
"https://t.alipayobjects.com/images/T1qWNhXkpe
XXXXXXXX.mp4"
type=
"video/mp4"
></video>
<video
preload
loop
><source
src=
"https://t.alipayobjects.com/images/rmsweb/T1
yHhhXfxkXXXXXXXX.webm"
type=
"video/webm"
><source
src=
"https://t.alipayobjects.com/images/rmsweb/T15IXhXlXb
XXXXXXXX.mp4"
type=
"video/mp4"
></video>
</div>
> 参考我们的进场组件案例。查看[进场动画组件](/components/enter-animation/)
##
响应互动
##
转换动画
响应交互一般是指我们在浏览页面时,点击元素时动画给我们视觉上的反馈,每个交互动效都能给我们带来不同视觉效果。
### 视觉连贯性三元素
比如:按钮上的 hover 或 click 效果,随着你的鼠标事件而改变自身或增加元素在按钮上,或者折叠面板和弹出框,点击后给你呈现新加入的信息元素。
-
Adding: 新加入的信息元素应被告知如何使用,从页面转变的信息元素需被重新识别。
-
Receding: 与当前页无关的信息元素应采用适当方式移除。
-
Normal: 指那些从转场开始到结束都没有发生变化的信息元素。
### 可折叠面板
...
...
@@ -57,3 +48,21 @@
<div
class=
"video-player"
>
<video
preload
loop
><source
src=
"https://t.alipayobjects.com/images/rmsweb/T1br0gXghtXXXXXXXX.webm"
type=
"video/webm"
><source
src=
"https://t.alipayobjects.com/images/rmsweb/T1lcRgXb4gXXXXXXXX.mp4"
type=
"video/mp4"
></video>
</div>
### 页面转场
从内容A到内容B的转变过程时能有效的吸引用户注意力,突出视觉中心,提高整体视觉效果。
-
大页面转场可采用左出右入的形式。
-
小的信息元素排布或块状较多的情况下,根据一定的路径层次依次进场,区分维度层级,来凸显量级,来指引用户的视觉轨迹。
<script
src=
"/static/TweenMax.min.js"
></script>
<script
src=
"/static/motion.js"
></script>
<div
class=
"video-player"
>
<video
preload
loop
><source
src=
"https://t.alipayobjects.com/images/rmsweb/T14q0hXbBdXXXXXXXX.webm"
type=
"video/webm"
><source
src=
"https://t.alipayobjects.com/images/T1qWNhXkpeXXXXXXXX.mp4"
type=
"video/mp4"
></video>
</div>
> 参考我们的进场组件案例。查看[进场动画组件](/components/enter-animation/)
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录