mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-16 09:39:10 +08:00
3.4 KiB
3.4 KiB
表单动画进场
- order: 2
表单组全合的进场与出场动画。
var EnterAnimation = antd.EnterAnimation;
var Select = antd.Select;
var Option = Select.Option;
var Checkbox = antd.Checkbox;
var Radio = antd.Radio;
var RadioGroup = antd.RadioGroup;
var Test = React.createClass({
getInitialState(){
return {
direction:'enter',
upend:false,
type:'right',
interval:0.1,
callback:null
}
},
onEnter(){
this.setState({
direction:'enter',
upend:false,
type:'right',
callback:null
})
},
onLeave(){
this.setState({
direction:'leave',
upend:true,
type:'bottom',
callback:function (){
console.log('出场结束');
}
})
},
render() {
return (
<div>
<div style={{'margin-bottom':20,'text-align':'center'}}>
<button className="ant-btn ant-btn-primary" onClick={this.onEnter}>进场</button>
<button className="ant-btn ant-btn-primary" style={{'margin-left':20}} onClick={this.onLeave}>出场</button>
</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>
)
}
});
React.render(<Test />
, document.getElementById('components-enter-animation-demo-enter-from'));