Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wanjj_1210
ant-design
提交
5ba39859
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,发现更多精彩内容 >>
提交
5ba39859
编写于
3月 30, 2016
作者:
A
afc163
浏览文件
操作
浏览文件
下载
差异文件
Merge from master
上级
c47fdeaf
88531eea
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
37 addition
and
30 deletion
+37
-30
docs/spec/motion.md
docs/spec/motion.md
+26
-25
site/common/styles/motion.less
site/common/styles/motion.less
+11
-5
未找到文件。
docs/spec/motion.md
浏览文件 @
5ba39859
...
...
@@ -8,6 +8,10 @@
Ant Design 提供了一些预设的组件动画样式。
可以使用
[
rc-animate
](
https://github.com/react-component/animate
)
的
[
transitionName
](
http://react-component.github.io/animate/examples/simple.html
)
属性来给任意元素指定动画。
> 示例延长了动画时长以便展示。
`````
__react
const cssAnimation = require('css-animation');
const Select = antd.Select;
...
...
@@ -165,24 +169,23 @@ motions = motions.concat([[{
direction: 'enter',
type: '其他'
}]]);
const leave='-leave';
const Test = React.createClass({
var leave = '-leave';
var Test = React.createClass({
handleChange(e) {
const
value = e;
if
(value)
{
this.demoNode.style.visibility
=
'';
var
value = e;
if
(value)
{
this.demoNode.style.visibility
=
'';
cssAnimation(this.demoNode, value, () => {
if
(value.slice(-leave.length)===leave)
{
this.demoNode.style.visibility
=
'hidden';
if
(value.slice(-leave.length) === leave)
{
this.demoNode.style.visibility
=
'hidden';
}
});
}
},
componentDidMount() {
this.demoNode = ReactDOM.findDOMNode(this.refs.demo);
},
render() {
const options = [<Option value="" key="placeholder">请选择预设动画</Option>].concat(motions.map(function (m, groupIndex) {
const opts = m.map(function (m2, optIndex) {
...
...
@@ -204,22 +207,20 @@ const Test = React.createClass({
ReactDOM.render(<Test key="motion" />, mountNode);
`````
## 组件动画
通过设置组件的
`transitionName`
指定组件动画。
| 组件 | 中文名 | 采用动画 |
|--------------|--------------------
-
|-------------------------------------------------|
|
p
opover | 气泡浮出 |
`zoom-up`
`zoom-down`
`zoom-left`
`zoom-right`
|
|
p
opconfirm | 气泡确认 |
`zoom-up`
`zoom-down`
`zoom-left`
`zoom-right`
|
|
t
ooltip | 文字提示 |
`zoom-up`
`zoom-down`
`zoom-left`
`zoom-right`
|
|
m
odal | 弹出框 |
`zoom`
|
|
confirm | 弹出确认框
|
`zoom`
|
|--------------|--------------------|-------------------------------------------------|
|
P
opover | 气泡浮出 |
`zoom-up`
`zoom-down`
`zoom-left`
`zoom-right`
|
|
P
opconfirm | 气泡确认 |
`zoom-up`
`zoom-down`
`zoom-left`
`zoom-right`
|
|
T
ooltip | 文字提示 |
`zoom-up`
`zoom-down`
`zoom-left`
`zoom-right`
|
|
M
odal | 弹出框 |
`zoom`
|
|
Badge | 徽标数
|
`zoom`
|
| message | 信息提示条 |
`move-up`
|
| notification | 通知框 |
`move-right`
&
`slide-up`
|
| dropdown | 下拉菜单 |
`slide-up`
|
| select | 选择框 |
`slide-up`
|
| datepicker | 日期选择框 |
`slide-up`
|
| alert | 警告提示 |
`slide-up`
|
| menu | 导航菜单 |
`slide-up`
|
| datepicker | 日期选择框 |
`slide-up`
|
| Dropdown | 下拉菜单 |
`slide-up`
|
| Select | 选择框 |
`slide-up`
|
| Cascader | 级联选择框 |
`slide-up`
|
| TreeSelect | 树选择框 |
`slide-up`
|
| DatePicker | 日期选择框 |
`slide-up`
|
| TatePicker | 日期选择框 |
`slide-up`
|
| Alert | 警告提示 |
`slide-up`
|
| Menu | 导航菜单 |
`slide-up`
|
site/common/styles/motion.less
浏览文件 @
5ba39859
...
...
@@ -2,8 +2,10 @@
height: 190px;
line-height: 190px;
text-align: center;
margin-bottom: 20px;
margin: 40px 0 20px;
width: 80%;
}
.motion-example {
width: 180px;
height: 180px;
...
...
@@ -13,23 +15,27 @@
text-align: center;
display: inline-block !important;
border-radius: 8px;
animation-duration: 0.5s !important;
font-weight: bold;
background: url(https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg) center/230px;
}
.motion-select-wrapper{
.motion-select-wrapper {
text-align: center;
margin-bottom: 40px;
width: 80%;
}
.motion-select {
text-align:left;
width:180px;
}
.video-player{
.video-player
{
position: relative;
max-width: 800px;
&-right {
width: 616px;
float: right;
}
}
\ No newline at end of file
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录