zarm-web

## Transition 过渡 ### 内置动画内置动画类型。 :::demo visible控制显示隐藏 name为动画名称。 ```js constructor (props) { super(props); this.state = { visible: true, name: 'fade', directional: true } } render() { const { visible, name, directional } = this.state return ( <div> <Row> <Button type="primary" onClick={() => { this.setState({ visible: !visible, name: 'fade' }) }}>fade</Button> <Button type="primary" onClick={() => { this.setState({ visible: !visible, name: 'zoom' }) }}>zoom</Button> <Button type="primary" onClick={() => { this.setState({ visible: !visible, name: 'door' }) }}>door</Button> <Button type="primary" onClick={() => { this.setState({ visible: !visible, name: 'flip' }) }}>flip</Button> <Button type="primary" onClick={() => { this.setState({ visible: !visible, name: 'moveUp' }) }}>moveUp</Button> <Button type="primary" onClick={() => { this.setState({ visible: !visible, name: 'moveDown' }) }}>moveDown</Button> <Button type="primary" onClick={() => { this.setState({ visible: !visible, name: 'moveLeft' }) }}>moveLeft</Button> <Button type="primary" onClick={() => { this.setState({ visible: !visible, name: 'moveRight' }) }}>moveRight</Button> <Button type="primary" onClick={() => { this.setState({ visible: !visible, name: 'rotate' }) }}>rotate</Button> </Row> <Row> <Button type="primary" onClick={() => { this.setState({ visible: !visible, name: 'scaleDown' }) }}>scaleDown</Button> <Button type="primary" onClick={() => { this.setState({ visible: !visible, name: 'scaleUp' }) }}>scaleUp</Button> <Button type="primary" onClick={() => { this.setState({ visible: !visible, name: 'slideUp' }) }}>slideUp</Button> <Button type="primary" onClick={() => { this.setState({ visible: !visible, name: 'slideDown' }) }}>slideDown</Button> <Button type="primary" onClick={() => { this.setState({ visible: !visible, name: 'slideLeft' }) }}>slideLeft</Button> <Button type="primary" onClick={() => { this.setState({ visible: !visible, name: 'slideRight' }) }}>slideRight</Button> <Button type="primary" onClick={() => { this.setState({ visible: !visible, name: 'bounces' }) }}>bounce</Button> </Row> <Transition name={name} // transitionOnMount visible={this.state.visible} > <div style={{ position: 'relative', opacity: .6, background: '#ed1287', width: 200, height: 200, margin: '30px 0', zIndex: 20000 }}> </div> </Transition> </div> ) } ``` ::: ### 静态动画静态动画。 :::demo Button 组件提供5种主题，由`theme`属性来定义，默认为`default`。 ```js constructor (props) { super(props); this.state = { visible: true, name: 'fade', directional: true } } render() { const { visible, name, directional } = this.state return ( <div> <Row> <Button type="primary" onClick={() => { this.setState({ name: 'flash' }) }}>flash</Button> <Button type="primary" onClick={() => { this.setState({ name: 'shake' }) }}>shake</Button> <Button type="primary" onClick={() => { this.setState({ name: 'tada' }) }}>tada</Button> <Button type="primary" onClick={() => { this.setState({ name: 'pulse' }) }}>pulse</Button> <Button type="primary" onClick={() => { this.setState({ name: 'swing' }) }}>swing</Button> </Row> <Transition name={name} directional={false} visible={this.state.visible} > <div style={{ position: 'relative', background: '#00BC70', width: 200, height: 200, margin: '30px 0', zIndex: 20000, opacity: .6 }} /> </Transition> </div> ) } ``` ::: ### 动画函数勾子函数回调。 :::demo onShow onStart onComplete onHide ```js constructor (props) { super(props); this.state = { visible: true, name: 'bounce', } } onStart (data) { console.log(data) alert('animation onStart') } onComplete () { alert('animation onComplete') } onShow () { alert('animation onShow') } onHide () { alert('animation onHide') } onBeforeShow () { alert('animation onBeforeShow') } onBeforeHide () { alert('animation onBeforeHide') } render() { const { visible } = this.state return ( <div> <Row> <Button type="primary" onClick={() => { this.setState({ visible: !visible }) }}>flash</Button> </Row> <Transition name="bounces" visible={this.state.visible} onStart={this.onStart.bind(this)} onComplete={this.onComplete.bind(this)} onShow={this.onShow.bind(this)} onHide={this.onHide.bind(this)} onBeforeShow={this.onBeforeShow.bind(this)} onBeforeHide={this.onBeforeHide.bind(this)} > <div style={{ position: 'relative', background: '#EC9131', width: 200, height: 200, margin: '30px 0', zIndex: 20000, opacity: .6 }} /> </Transition> </div> ) } ``` ::: ### Collapse Transition 元素开闭动画过渡 :::demo ```js constructor (props) { super(props); this.state = { visible: true, } } render() { const { visible } = this.state return ( <div> <CollapseTransition visible={this.state.visible} > <div style={{ position: 'relative', background: '#ad65ec', width: 200, height: 200, margin: '30px 0', zIndex: 20000, opacity: .6 }} /> </CollapseTransition> <Button theme="primary" onClick={() => this.setState({ visible: !this.state.visible })}>open</Button> </div> ) } ``` ::: ### Transition Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | | visible | 是否显示/隐藏 | boolean | - | — | | name | 动画名称 | string | 内置动画类型参考上面 | fade | | duration | 动画持续时间 | number | — | 500 | | directional| 是否是静态动画 fasle代表静态动画 | boolean | — | true | | transitionOnMount | 是否在节点挂载时动画 | boolean | — | false | | unmountOnHide | 节点隐藏时候是否删除节点 | - | - | false | | mountOnShow | 初始化的时候是否挂载节点 | boolean | - | true | ### Transition Events | 事件名称 | 说明 | 回调参数 | |---------- |-------- |---------- | | onStart | 动画开始时候调用 | ({ ...props, status }) | | onComplete | 动画结束后调用 | ({ ...props, status }) | | onShow | 动画完成之后显示时候调用 | ({ ...props, status }) | | onHide | 动画完成之后隐藏时候调用 | ({ ...props, status }) | | onBeforeShow | 显示前调用 | ({ ...props, status }) | | onBeforeHide | 隐藏之前调用 | ({ ...props, status }) | ### CollapseTransition Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | | visible | 是否显示/隐藏 | boolean | - | — |