Skip to content

A
ant-design

wanjj_1210 / ant-design
与 Fork 源项目一致

从无法访问的项目Fork

通知 10
Star 0
Fork 0
A
ant-design

体验新版 GitCode，发现更多精彩内容 >>

提交 a1d9cb31 编写于 作者: J jljsj
浏览文件
操作

Merge branch 'master' of github.com:ant-design/ant-design

上级 9d5bc12d 78307183
隐藏空白更改
内联 并排
Showing with 490 addition and 331 deletion
CHANGELOG.md
浏览文件 @ a1d9cb31
......@@ -58,6 +58,11 @@
* 修改 Radio.Group 容器的盒模型属性为 inline-block 。
### Enter Animation
* 大幅度的重构，全新 API 的设计。
* 支持和 react-router 结合使用。
### 其他
* 新增 [timeline](http://ant.design/components/timeline) 和 [badge](http://ant.design/components/badge) 组件。
......
components/enter-animation/demo/basic.md
浏览文件 @ a1d9cb31
......@@ -2,7 +2,7 @@
- order: 0
默认子节点进场动画。为避免与本站页面的进场冲突，所以 `EnterAnimation` 里延时 1 秒，递增 `interval` 为 0.3。
默认子节点进场动画。
---
......@@ -11,75 +11,62 @@
var EnterAnimation = antd.EnterAnimation;
var Test = React.createClass({
getInitialState(){
getInitialState() {
return {
direction:'enter',
upend:false,
type:'right',
interval:0.3
bool:true,
}
},
onEnter(){
onClick() {
this.setState({
direction:'enter',
upend:false,
type:'right',
interval:0.3
})
},
onLeave(){
this.setState({
direction:'leave',
upend:false,
type:'left',
interval:.1
bool:!this.state.bool,
})
},
render() {
return (
<div>
<div style={{marginBottom:20}}>
<button className="ant-btn ant-btn-primary" onClick={this.onEnter}>进场</button>
<button className="ant-btn ant-btn-primary" style={{marginLeft:20}} onClick={this.onLeave}>出场</button>
<div style={{marginBottom: 20}}>
<button className="ant-btn ant-btn-primary" onClick={this.onClick}>切换</button>
</div>
<EnterAnimation interval={this.state.interval} type={this.state.type} upend={this.state.upend} direction={this.state.direction}>
<div className="demo-header" enter-data>
<div className="logo">
<img width="30" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" />
<span>logo</span>
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div className="demo-content" enter-data>
<div className="demo-title">我是标题</div>
<div className="demo-kp">
<EnterAnimation>
{this.state.bool ? <div key='a'>
<div className="demo-header">
<div className="logo">
<img width="30" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" />
<span>logo</span>
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div className="demo-title">我是标题</div>
<div className="demo-listBox">
<div className="demo-list">
<div className="title"></div>
<div className="demo-content" >
<div className="demo-title">我是标题</div>
<div className="demo-kp">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div className="demo-title">我是标题</div>
<div className="demo-listBox">
<div className="demo-list">
<div className="title"></div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
<div className="demo-footer" enter-data></div>
<div className="demo-footer"></div>
</div> : null}
</EnterAnimation>
</div>
);
......@@ -92,7 +79,6 @@ React.render(<Test />
<style>
#components-enter-animation-demo-basic {
width: 600px;
text-align: center;
overflow: hidden;
margin: 20px auto;
......
components/enter-animation/demo/enter-data.md
浏览文件 @ a1d9cb31
# 指定节点动画进场
# 指定节点动画进出场
- order: 1
- order: 2
通过加上 `enter-data` 属性来指定需要动画进场的元素，并且可以定义每个元素的动画效果，用到的参数有 `type` `queueId` `delay`。
通过加上 `enter-data` 属性来指定需要动画进场的元素，并且可以定义每个元素的动画效果。
---
......@@ -11,81 +11,55 @@
var EnterAnimation = antd.EnterAnimation;
var Test = React.createClass({
getInitialState(){
getInitialState() {
return {
direction:'enter',
upend:false,
type:'right',
interval:0.1,
delay:0.7
enter: {
type: 'right',
interval: .1,
},
leave: {
interval: 0.03
},
show: true
}
},
onEnter(){
onClick() {
this.setState({
direction:'enter',
upend:false,
type:'right',
interval:0.05,
delay:0.7
show: !this.state.show
})
},
onLeave(){
this.setState({
direction:'leave',
upend:false,
type:'right',
interval:.03,
delay:0.1
})
},
render() {
return (
<div>
<div style={{marginBottom:20}}>
<button className="ant-btn ant-btn-primary" onClick={this.onEnter}>进场</button>
<button className="ant-btn ant-btn-primary" style={{marginLeft:20}} onClick={this.onLeave}>出场</button>
</div>
<EnterAnimation interval={this.state.interval} type={this.state.type} upend={this.state.upend} direction={this.state.direction}>
<div className="demo-header" enter-data={{type: 'alpha'}}>
<div className="logo" enter-data={{type: 'left'}}>
<img width="30" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg"/>
<span>logo</span>
</div>
<ul>
<li enter-data></li>
<li enter-data></li>
<li enter-data></li>
<li enter-data></li>
<li enter-data></li>
</ul>
<div>
<div style={{marginBottom: 20}}>
<button className="ant-btn ant-btn-primary" onClick={this.onClick}>切换</button>
</div>
<div className="demo-content">
<div className="demo-title" enter-data={{type:'alpha'}}>我是标题</div>
<div className="demo-kp">
<ul>
<li enter-data></li>
<li enter-data></li>
<li enter-data></li>
</ul>
</div>
<div className="demo-title" enter-data={{type:'alpha',queueId:1,delay:this.state.delay}}>我是标题</div>
<div className="demo-listBox">
<div className="demo-list">
<div className="title" enter-data={{type:'bottom',queueId:1}}></div>
<EnterAnimation enter={this.state.enter} leave={this.state.leave}>
{this.state.show ? <div key='enter-data'>
<div className="demo-content">
<div className="demo-title" enter-data={{type: 'alpha'}}>我是标题</div>
<div className="demo-kp">
<ul>
<li enter-data={{type:'bottom',queueId:1}}></li>
<li enter-data={{type:'bottom',queueId:1}}></li>
<li enter-data={{type:'bottom',queueId:1}}></li>
<li enter-data={{type:'bottom',queueId:1}}></li>
<li enter-data={{type:'bottom',queueId:1}}></li>
<li enter-data></li>
<li enter-data></li>
<li enter-data></li>
</ul>
</div>
<div className="demo-title" enter-data={{type: 'alpha', queueId: 1, delay: 0.8}} leave-data={{delay: 0.1}}>我是标题</div>
<div className="demo-listBox">
<div className="demo-list">
<div className="title" enter-data={{type: 'bottom', queueId: 1}}></div>
<ul>
<li enter-data={{type: 'bottom', queueId: 1}}></li>
<li enter-data={{type: 'bottom', queueId: 1}}></li>
<li enter-data={{type: 'bottom', queueId: 1}}></li>
</ul>
</div>
</div>
</div>
</div>
<div className="demo-footer" enter-data={{type:'bottom',queueId:1}}></div>
</EnterAnimation>
</div>
</div> : null}
</EnterAnimation>
</div>
)
}
});
......@@ -96,9 +70,8 @@ React.render(<Test />
<style>
#components-enter-animation-demo-enter-data {
width: 600px;
text-align: center;
overflow: hidden;
margin: 20px auto;
margin: 18px auto;
}
</style>
components/enter-animation/demo/enter-leave.md 0 → 100644
浏览文件 @ a1d9cb31
# 配置进出场的样式
- order: 1
配置进出场动画样式。
---
````jsx
var EnterAnimation = antd.EnterAnimation;
var Test = React.createClass({
getInitialState() {
return {
enter:{
type: 'right',
interval: 0.3,
callback:() => {
console.log('enter');
}
},
leave:{
type: 'left',
interval: .1,
callback:() => {
console.log('leave');
}
},
show:true,
}
},
onClick() {
this.setState({
show:!this.state.show,
})
},
render() {
return (
<div>
<div style={{marginBottom: 20}}>
<button className="ant-btn ant-btn-primary" onClick={this.onClick}>切换</button>
</div>
<EnterAnimation enter={this.state.enter} leave={this.state.leave}>
{this.state.show ? <div key='a'>
<div className="demo-header">
<div className="logo">
<img width="30" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" />
<span>logo</span>
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div className="demo-content" >
<div className="demo-title">我是标题</div>
<div className="demo-kp">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div className="demo-title">我是标题</div>
<div className="demo-listBox">
<div className="demo-list">
<div className="title"></div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<div className="demo-footer"></div>
</div> : null}
</EnterAnimation>
</div>
);
}
});
React.render(<Test />
, document.getElementById('components-enter-animation-demo-enter-leave'));
````
<style>
#components-enter-animation-demo-enter-leave {
text-align: center;
overflow: hidden;
margin: 20px auto;
}
</style>
components/enter-animation/demo/form.md
浏览文件 @ a1d9cb31
# 表单动画进场
# 表单动画进出场
- order: 2
- order: 4
表单组全合的进场与出场动画。
表单组合的进场与出场动画。
---
......@@ -15,85 +15,81 @@ var Radio = antd.Radio;
var RadioGroup = antd.Radio.Group;
var Test = React.createClass({
getInitialState(){
getInitialState() {
return {
direction:'enter',
upend:false,
type:'right',
interval:0.1,
callback:null
enter: {
type: 'right',
callback: null,
interval: 0.1
},
leave: {
type: 'left',
reverse: true,
interval: 0.05,
callback: ()=> {
console.log('出场结束')
}
},
show: true
}
},
onEnter(){
onClick() {
this.setState({
direction:'enter',
upend:false,
type:'right',
callback:null
})
},
onLeave(){
this.setState({
direction:'leave',
upend:true,
type:'bottom',
callback:function (){
console.log('出场结束');
}
show: !this.state.show
})
},
render() {
return (
<div>
<div style={{marginBottom:20,textAlign:'center'}}>
<button className="ant-btn ant-btn-primary" onClick={this.onEnter}>进场</button>
<button className="ant-btn ant-btn-primary" style={{marginLeft:20}} onClick={this.onLeave}>出场</button>
<div>
<div style={{marginBottom: 20, textAlign: 'center'}}>
<button className="ant-btn ant-btn-primary" onClick={this.onClick}>切换</button>
</div>
<EnterAnimation enter={this.state.enter} leave={this.state.leave} component='form' className="ant-form-horizontal">
{this.state.show ? <div key='from'>
<div className="ant-form-item ant-form-item-compact">
<label htmlFor="userName" className="col-6" required>用户名：</label>
<div className="col-6">
<p className="ant-form-text">大眼萌 minion</p>
</div>
</div>
<div className="ant-form-item">
<label htmlFor="password" className="col-6" required>密码：</label>
<div className="col-14">
<input className="ant-input" type="password" id="password" placeholder="请输入密码"/>
</div>
</div>
<div className="ant-form-item ant-form-item-compact">
<label className="col-6" required>您的性别：</label>
<div className="col-14">
<RadioGroup value="male">
<Radio value="male">男的</Radio>
<Radio value="female">女的</Radio>
</RadioGroup>
</div>
</div>
<div className="ant-form-item">
<label htmlFor="remark" className="col-6" required>备注：</label>
<div className="col-14">
<textarea className="ant-input" id="remark" placeholder="随便写"></textarea>
<p className="ant-form-explain">随便写点什么</p>
</div>
</div>
<div className="ant-form-item ant-form-item-compact">
<div className="col-14 col-offset-6">
<label>
<Checkbox />
同意
</label>
</div>
</div>
<div className="row">
<div className="col-16 col-offset-6">
<input type="submit" className="ant-btn ant-btn-primary" value="确 定" />
</div>
</div>
</div> : null}
</EnterAnimation>
</div>
<form className="ant-form-horizontal">
<EnterAnimation interval={this.state.interval} type={this.state.type} upend={this.state.upend} direction={this.state.direction} callback={this.state.callback}>
<div className="ant-form-item ant-form-item-compact">
<label htmlFor="userName" className="col-6" required>用户名：</label>
<div className="col-6">
<p className="ant-form-text">大眼萌 minion</p>
</div>
</div>
<div className="ant-form-item">
<label htmlFor="password" className="col-6" required>密码：</label>
<div className="col-14">
<input className="ant-input" type="password" id="password" placeholder="请输入密码"/>
</div>
</div>
<div className="ant-form-item ant-form-item-compact">
<label className="col-6" required>您的性别：</label>
<div className="col-14">
<RadioGroup value="male">
<Radio value="male">男的</Radio>
<Radio value="female">女的</Radio>
</RadioGroup>
</div>
</div>
<div className="ant-form-item">
<label htmlFor="remark" className="col-6" required>备注：</label>
<div className="col-14">
<textarea className="ant-input" id="remark" placeholder="随便写"></textarea>
<p className="ant-form-explain">随便写点什么</p>
</div>
</div>
<div className="ant-form-item ant-form-item-compact">
<div className="col-14 col-offset-6">
<label>
<Checkbox /> 同意
</label>
</div>
</div>
<div className="row">
<div className="col-16 col-offset-6">
<input type="submit" className="ant-btn ant-btn-primary" value="确 定" />
</div>
</div>
</EnterAnimation>
</form>
</div>
)
}
});
......@@ -102,11 +98,3 @@ React.render(<Test />
, document.getElementById('components-enter-animation-demo-form'));
````
<style>
#components-enter-animation-demo-enter-data {
width: 600px;
text-align: center;
overflow: hidden;
margin: 20px auto;
}
</style>
components/enter-animation/demo/router.md 0 → 100644
浏览文件 @ a1d9cb31
# Router 默认进出场
- order: 5
router 组合的进场与出场动画。
---
````jsx
var ReactRouter = require('react-router');
var history = require('react-router/lib/HashHistory').history;
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var Link = ReactRouter.Link;
var EnterAnimation = antd.EnterAnimation;
var Menu = antd.Menu;
var App = React.createClass({
getInitialState: function () {
return {};
},
clickPage() {
this.setState({
enter: {delay: 0.3},
leave: {delay: 0}
});
},
render() {
var key = this.props.location.pathname;
return (
<div>
<Menu style={{marginBottom: 20}} mode="horizontal">
<Menu.Item key='page1'>
<Link to="/page1" onClick={this.clickPage}>Page 1</Link>
</Menu.Item>
<Menu.Item key='page2'>
<Link to="/page2" onClick={this.clickPage}>Page 2</Link>
</Menu.Item>
</Menu>
<EnterAnimation className='demo-router-wap' enter={this.state.enter} leave={this.state.leave}>
{React.cloneElement(this.props.children || <div key='home' className='demo-router-child'><h1>Home</h1><div>这是首页</div></div>, {key: key})}
</EnterAnimation>
</div>
);
}
});
var Page1 = React.createClass({
render() {
return (
<div className="demo-router-child">
<h1>Page 1</h1>
<p><Link to="/page2">A link to page 2 should be active</Link>依次进场</p>
<p><Link to="/page2">A link to page 2 should be active</Link>依次进场</p>
<p><Link to="/page2">A link to page 2 should be active</Link>依次进场</p>
<p><Link to="/page2">A link to page 2 should be active</Link>依次进场</p>
<p><Link to="/page2">A link to page 2 should be active</Link>改变样式</p>
</div>
);
}
});
var Page2 = React.createClass({
render() {
return (
<div className="demo-router-child">
<h1>Page 2</h1>
<p><Link to="/page1">a link to page 1 </Link>我是页面2.</p>
<p><Link to="/page1">a link to page 1 </Link>我是页面2.</p>
<p><Link to="/page1">a link to page 1 </Link>我是页面2.</p>
<p><Link to="/page1">a link to page 1 </Link>我是页面2.</p>
</div>
);
}
});
React.render((
<Router history={history}>
<Route path="/" component={App} ignoreScrollBehavior>
<Route path="page1" component={Page1} />
<Route path="page2" component={Page2} />
</Route>
</Router>
), document.getElementById('components-enter-animation-demo-router'));
````
<style>
#components-enter-animation-demo-router {
text-align: center;
}
.demo-router-wap{
position: relative;
transition: height .5s;
width: 300px;
margin: auto;
}
.demo-router-child{
text-align:left;
}
</style>
components/enter-animation/demo/style.md 0 → 100644
浏览文件 @ a1d9cb31
# style 自定义样式动画进出场
- order: 3
通过加上属性里的 `style` 来自定义 CSS 动画进出场。
---
````jsx
var EnterAnimation = antd.EnterAnimation;
var Test = React.createClass({
getInitialState() {
return {
enter: {
style: {
transform: "translateX(50px)",
opacity: 0
},
interval: .1,
},
leave: {
interval: 0.03
},
show: true
}
},
onClick() {
this.setState({
show: !this.state.show
})
},
render() {
return (
<div>
<div style={{marginBottom: 20}}>
<button className="ant-btn ant-btn-primary" onClick={this.onClick}>切换</button>
</div>
<EnterAnimation enter={this.state.enter} leave={this.state.leave}>
{this.state.show ? <div key='enter-data'>
<div className="demo-content">
<div className="demo-title" enter-data={{style: {opacity: 0}}}>我是标题</div>
<div className="demo-kp">
<ul>
<li enter-data></li>
<li enter-data></li>
<li enter-data></li>
</ul>
</div>
<div className="demo-title" enter-data={{style: {opacity: 0}, queueId: 1, delay: 0.8}} leave-data={{delay: 0.1}}>我是标题</div>
<div className="demo-listBox">
<div className="demo-list">
<div className="title" enter-data={{style: {transform: 'translateY(30px)', opacity: 0}, queueId: 1}}></div>
<ul>
<li enter-data={{style: {transform: 'translateY(30px)', opacity: 0}, queueId: 1}}></li>
<li enter-data={{style: {transform: 'translateY(30px)', opacity: 0}, queueId: 1}}></li>
<li enter-data={{style: {transform: 'translateY(30px)', opacity: 0}, queueId: 1}}></li>
</ul>
</div>
</div>
</div>
</div> : null}
</EnterAnimation>
</div>
)
}
});
React.render(<Test />
, document.getElementById('components-enter-animation-demo-style'));
````
<style>
#components-enter-animation-demo-style {
text-align: center;
overflow: hidden;
margin: 18px auto;
}
</style>
components/enter-animation/index.jsx
浏览文件 @ a1d9cb31
......@@ -9,3 +9,4 @@ class AntEnterAnimation extends React.Component {
AntEnterAnimation.to = EnterAnimation.to;
export default AntEnterAnimation;
components/enter-animation/index.md
浏览文件 @ a1d9cb31
......@@ -2,7 +2,7 @@
- category: Components
- chinese: 进场动画
- cols: 1
---
......@@ -28,7 +28,7 @@
</EnterAnimation>
```
如子节点有 `enter-data` 值，则只执行有 `enter-data` 的节点的动画，相反所有子节点上都没有 `enter-data` 值，则执行遍历dom下一级节点来执行动画。
如子节点有 `enter-data` 值，则只执行有 `enter-data` 的节点的动画，相反所有子节点上都没有 `enter-data` 值，则执行遍历 dom 下一级节点来执行动画。
```html
<EnterAnimation type="left" delay={2}>
......@@ -43,6 +43,18 @@
</EnterAnimation>
```
router 使用方法:
```html
<EnterAnimation enter={type:'left'} leave={type:'right'}>
{cloneElement(this.props.children || <div/>, {key: 'demo1'})}
//或者直接标签
<div key='demo2'>
<div>依次进场</div>
<div>依次进场</div>
</div>
</EnterAnimation>
```
## API
......@@ -50,32 +62,46 @@
|参数 |类型 |默认值 |详细 |
|-----------------|-------|-------------|----------------------------------------------------|
|type |string |`right` |执行动画的内置参数 |
|eStyle |string |null |同上， style 的样式动画, `type` 有值，此项无效|
|direction |string |`enter`|动画进场或出场样式,以 `enter` `leave` 两值|
|duration |number |0.5 |每个动画的时间|
|enter|object| `{type:'right'}` |管理进场数据|
|leave|object| null |管理当前元素出场的数据, null 时继承 enter 里的所有标签的值 |
|component|string| `div` | EnterAnimation 替换的标签名|
### enter = {} | leave = {}
|参数 |类型 |默认值 |详细 |
|-----------------|-------|-------------|----------------------------------------------------|
|type |string |`right` |内置动画样式：<br/> `alpha` `left` `right` `top` `bottom` `scale` `scaleBig` `scaleX` `scaleY` |
|style |object / string |null |同上， style 的样式动画, `type` 有值，此项无效。<br/>如 `{transform:'translateX(100px)'}` 或 `'transform: translateX(100px)'`|
|duration |number |0.5 |每个动画的时间,以秒为单位|
|ease |string|`cubic-bezier(0.165, 0.84, 0.44, 1);`|样式缓动,只支持 css 样式缓动;|
|delay |number |0 |整个区块的延时，以秒为单位|
|upend |boolean|false |是否倒放,从最后一个dom开始往上播放|
|reverse |boolean|false |是否倒放,从最后一个 dom 开始往上播放|
|interval |number |0.1 |递增延时值，以秒为单位|
|callback |function|null |动画结束回调|
### enter-data
### 一级标签key：
|参数 |类型 |详细 |
|-----------------|-------|----------------------------------------------------|
|key|string|必需，控制进出场；|
### 子标签
|参数 |类型 |默认值 |详细 |
|-----------------|-------|-----------|----------------------------------------------------|
|enter-data |object | `right` |子标签动画参数|
|enter-data |object | `{type:'right'}` |子标签进场参数|
|leave-data |object | `enter-data` |子标签出场参数|
#### enter-data={}
#### enter-data = {} | leave-data = {}
|参数 |类型 |默认值 |详细 |
|-----------------|-----------------|----------------|----------------------------------------------------|
|type |string |`right` |内置动画样式：<br/> `alpha` `left` `right` `top` `bottom` `scale` `scaleBig` `scaleX` `scaleY`|
|style |string |null |动画样式，如 `transform: translateX(100px)`，`type` 有值此项无效|
|direction |string |`enter` |动画进出场方向：`enter` `leave`,覆盖标签里的值|
|duration |number |0.5 |动画的时间,以秒为单位,覆盖标签里的值|
|ease |string |`cubic-bezier(0.165, 0.84, 0.44, 1)`|样式缓动，只支持 css 样式缓动,覆盖标签里的值|
|delay |number |0 |动画的延时，依照结构递增以上的 `interval`|
|type |string |`right` |同标签里的 `type`,覆盖标签里的值|
|style |object / string |null |同标签里的 `style`,覆盖标签里的值|
|duration |number |0.5 |同标签里的 `duration`,覆盖标签里的值|
|ease |string |`cubic-bezier(0.165, 0.84, 0.44, 1)`|同标签里的 `ease`,覆盖标签里的值|
|delay |number |0 |当前动画的延时，依照结构递增以上的 `interval`|
|queueId |number |0 |动画的线程|
> 由于使用了 CSS3 动画，所以 `IE9` 及更早的版本将没有进场效果。
......
components/iconfont/index.md
浏览文件 @ a1d9cb31
......@@ -3,6 +3,7 @@
- category: Components
- chinese: 字体图标
- type: 基本
- noinstant: true
---
......
package.json
浏览文件 @ a1d9cb31
{
"name": "antd",
"version": "0.9.0-beta8",
"version": "0.9.0-beta9",
"stableVersion": "0.8.0",
"title": "Ant Design",
"description": "一个 UI 设计语言",
......@@ -33,7 +33,7 @@
"license": "MIT",
"dependencies": {
"css-animation": "~1.1.0",
"enter-animation": "~0.3.0",
"enter-animation": "~0.4.9",
"gregorian-calendar": "~3.0.0",
"gregorian-calendar-format": "~3.0.1",
"object-assign": "~4.0.1",
......
scripts/demo.js
浏览文件 @ a1d9cb31
......@@ -6,8 +6,8 @@ var antd = require('antd');
var $ = require('jquery');
var React = require('react');
$(function () {
// auto complete for components
InstantClickChangeFns.push(function () {
// auto complete for components
var Select = antd.Select;
var Option = Select.Option;
// 获取搜索数据
......
site/templates/aside.html
浏览文件 @ a1d9cb31
......@@ -20,7 +20,9 @@
<li class="type-divider">{{item.name}}</li>
{%- else %}
<li class="{%- if item.title === post.title %}current{%- endif %}">
<a href="{{permalink_url(item)}}" class="{%- if item.meta.disabled %}nav-link-disabled{%- endif %}">
<a href="{{permalink_url(item)}}"
class="{%- if item.meta.disabled %}nav-link-disabled{%- endif %}"
{%- if item.meta.noinstant %}data-no-instant{%- endif %}>
{{item.title}}
<span class="chinese">{{item.meta.chinese}}</span>
</a>
......
site/templates/layout.html
浏览文件 @ a1d9cb31
......@@ -36,6 +36,7 @@
<script src="https://a.alipayobjects.com/??bluebird/2.9.30/bluebird.js,jquery/jquery/1.11.1/jquery.js,es5-shim/4.1.10/es5-shim.js,es5-shim/4.1.10/es5-sham.js,html5shiv/3.7.2/src/html5shiv.js,react/0.13.3/react.js"></script>
<script>
var ANT_COMPONENTS = [];
var InstantClickChangeFns = [];
{%- for item in resource.pages|find_category(["CSS","Components"]) %}
ANT_COMPONENTS.push({
title: '{{item.title}}',
......@@ -90,7 +91,7 @@
<span class="bar"></span>
<ul>
<li class="{%- if post.meta.filepath === 'README.md' %}current{%- endif %}">
<a href="/">首页</a>
<a href="/" data-no-instant>首页</a>
</li>
<li class="{%- if post.directory|rootDirectoryIn(['spec']) %}current{%- endif %}">
<a href="/spec/introduce">设计</a>
......@@ -112,5 +113,14 @@
{% block aside %}{% endblock %} {% block content %}{% endblock %}
</div>
{%- include "footer.html" %}
<script src="https://t.alipayobjects.com/images/rmsweb/T1AmXhXg0kXXXXXXXX.js" data-no-instant></script>
<script data-no-instant>
InstantClick.on('change', function() {
InstantClickChangeFns.forEach(function(fn) {
fn();
});
});
InstantClick.init();
</script>
</body>
</html>
spec/page-transition.md
浏览文件 @ a1d9cb31
......@@ -2,6 +2,7 @@
- category: 动画
- order: 1
- noinstant: true
---
......
static/motionDemo.js 已删除 100644 → 0
浏览文件 @ 9d5bc12d
/**
* Created by jljsj on 15/6/30.
*/
$(function (){
var animBtnDome={
animStr:'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
init:function() {
var self=this;
self.body=$("body");
self.btn=$(".ant-btn-ripple");
//$(".ant-btn-lq").bind("click",function (le){
// le.stopPropagation();
//});
//涟漪效果
self.btn.bind("mousedown",function (e){
//console.log(e)
//var _x= e.offsetX,_y= e.offsetY;
var __x=$(this).offset().left,__y=$(this).offset().top,
_x= e.pageX-__x,_y= e.pageY-__y;
var lq=$("<em class='ant-btn-lq'></em>").prependTo(this);
var _w=this.offsetWidth,_h=this.offsetHeight;
lq.removeAttr("style").css({width:_w,height:_w,"border-radius":_w/2,left:_x-_w/2,top:_y-_w/2});
if($(this).attr("class").indexOf("ant-btn-primary")>=0||$(this).attr("class").indexOf("ant-btn-ghost")>=0){
lq.css("background-color","#fff");
}else{
lq.css("background-color","#999");
}
var s=0;
//if(_h>=_w){
// s=_y/_h*2<1?2-_y/_h*2:_y/_h*2;
//}
var _sx=_x/_w* 2,_sy=_y/_h*2;
if(_sx>1&&_sy>1){
s=_sx>_sy?_sx:_sy;
}else if(_sx>1||_sy>1){
_sx=_sx<1?2-_sx:_sx;
_sy=_sy<1?2-_sy:_sy;
s=_sx>_sy?_sx:_sy;
}else {
s=2-_sx>2-_sy?2-_sx:2-_sy;
}
s=s+.3;
lq.css("transform","scale("+s+")")
});
function mousee_up(e){
var lq=$(this).find(".ant-btn-lq");
lq.delay(300).animate({opacity:0},300,function (){
lq.remove();
})
}
self.btn.bind("mouseout",mousee_up);
self.btn.bind("mouseup",mousee_up);
//加载按钮
self.loadBtn=$(".ant-btn-load");
self.loadBtn.bind("click",function (e){
var m=$(this);
m.find("text").css({"opacity":"0","transform": "scale(2)"});
m.find("span").css({"opacity":1,"transform": "scale(1)"});
setTimeout(function (){
m.find("text").removeAttr("style");
m.find("span").removeAttr("style")
},4000)
});
//替换
function reqClass(m,_class,call){
if(m.attr("class").indexOf(_class+"-open")>=0){
m.removeClass(_class+"-open").addClass(_class+"-close").one(self.animStr,function (){
m.removeClass(_class+"-close");
if(typeof call=="function"){
call()
}
})
}else{
m.addClass(_class+"-open");
}
}
//icon的下拉演示
self.listTip=$(".ant-btn-listtip");
self.listTip.bind("click",function (e){
var m=$(this);
var tip=$("#"+m.attr("data-id"));
reqClass(tip,"scale");
tip.css({left: m.position().left-tip.width()+ m.outerWidth()-2,top: m.position().top+m.outerHeight()+12})
});
//dropdown演示的事件
self.dropdown=$(".ant-dropdown-wrap");
self.dropdown.find(".ant-btn-menu").bind("click",function (e){
var m=$(this),p= m.parent(),d= p.find(".ant-dropdown"),
con= d.find(".ant-dropdown-con"),str="margin-top";
d.css({"display":"block","margin-top":2});
reqClass(con,str,function (){
if(con.attr("class").indexOf('margin-top')<0){
d.css({"display":"none"})
}
});
})
}
};
animBtnDome.init()
});
\ No newline at end of file
static/script.js
浏览文件 @ a1d9cb31
$(function() {
InstantClickChangeFns.push(function() {
$('.component-demos .icon-all').on('click', function() {
if ($(this).hasClass('expand')) {
$(this).removeClass('expand');
......@@ -142,7 +142,6 @@ $(function() {
list.css({"display":"block","margin-top":-list.height()});
list.animate({marginTop:0},400,"easeInOutCirc")
}
//parent.find("ul").slideToggle(300);
});
}
};
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或