react ^16.12.0 + antd ^4.2.3 如何实现对Form下面的Form.Item进行动效展示【使用rc-queue-anim】

yarn add rc-queue-anim

实际项目里笔者使用的是"rc-queue-anim": "^1.8.5"

出自“Ant Motion”官网链接https://motion.ant.design/api/queue-anim-cn

属于其中的“进出场动画”（之前以为是css样式动画，装了rc-tween-one研究半天Animate没有生效）

 

rc-queue-anim的话，api很友好，子级元素记得手动加key  （queueAnim不能直接套在Form上，手动给Form设key会导致antd封装好的Form功能出错，此处特地开了个div），其他也没啥要注意的

import QueueAnim from 'rc-queue-anim';


...省略其他代码

//render中return的内容
...
 <Spin size="large" tip="登陆中..." spinning={this.state.loading} className="loading">

                <Form ref={this.login_formRef} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} labelAlign={"left"}>
                  <QueueAnim type={"scaleX"}>
                    <div key="loginform_01">
                      <Form.Item
                        name="userId"
                        label={<b style={label_b_Style}>用户名:</b>}
                        colon={false}
                        rules={[{ required: true, message: '用户名不可为空!' }]}
                      >
                        <Input
                          onKeyPress={(e) => { if (e.which === 13) { this.handleSubmit() } }}
                          prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
                          placeholder="请输入用户名" />
                      </Form.Item>

                      <Form.Item
                        name="password"
                        label={<b style={label_b_Style}>密码:</b>}
                        colon={false}
                        rules={[{ required: true, message: '密码不可为空!' }]}
                      >

                        <Input.Password
                          prefix={<LockOutlined style={{ color: 'rgba(0,0,0,.30)' }} />}
                          onKeyPress={(e) => { if (e.which === 13) { this.handleSubmit() } }}
                          type="password"
                          placeholder="请输入密码" />
                      </Form.Item>

                    </div>
                  </QueueAnim>
                </Form>

                <Button onClick={() => this.handleSubmit()}
                  block danger shape={"round"} type="primary">
                  登录
                </Button>
                <Button type="link" danger block onClick={() => this.setState({ mode: "register" })}>
                  没有账号?去注册一个&gt;&gt;
                </Button>
              </Spin>

...

触发条件是dom渲染的时候，就是普通的设个state变量三目运算进行展示照旧就行

api:

type	string / array	right	动画内置参数 alpha left right top bottom scale scaleBig scaleX scaleY
animConfig	object / array	null	配置动画参数 如 { opacity:[1, 0] } 参数为: { opacity: Array<end, start> } 出场则相反: { opacity: Array<start, end> }; 详细说明查看下面的 animConfig
delay	number / array	0	整个动画的延时,以毫秒为单位
duration	number / array	450	每个动画的时间,以毫秒为单位
interval	number / array	100	每个动画的间隔时间,以毫秒为单位
leaveReverse	boolean	false	出场时是否倒放,从最后一个 dom 开始往上播放
ease	string / array	easeOutQuart	动画的缓动函数,查看详细
appear	boolean	true	开始进入时是否有动画
animatingClassName	array	['queue-anim-entering', 'queue-anim-leaving']	进出场动画进行中的类名
component	React.Element/string	div	QueueAnim 替换的标签名
componentProps	object	{}	组件的 props
forcedReplay	boolean	false	是否强制重放动画，比如：在出场动画时触发了进场动画，立即执行进场动画
onEnd	func	null	动画结束后回调， callback({ key, type }); type 为 enter 或 leave