QueueAnim动态效果

       QueueAnime动态效果组件，默认动画时间是450ms，如果在450ms动画内连续删除，那么被连续删除的组件再次呈现时不会呈现动态效果，因此要做一个定时器，使得删除时间要大于duration属性时间 (默认是450ms)

/**点击增加查询和删除查询事件的定时器time**/
let time1 = 0;
let time2 = 0;

/**全局提示*start*/
const infoTop = '条件已达上限！';
const infoButtom = '不能再删了！';
/**全局提示*end*/

/**主组件*start*/
export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        /**num是当前选择的输入框div**/
        num: 0,
        /**show决定输入框是否显示**/
        show: [false, false, false, false],
        }

    /**删除按钮点击事件  **start**/
    btnClick = () => {
        /**设定计时器以免删除过快导致特效无法再次显示**/
        if (time1 === 0) {
            time1 = 1; //设定间隔时间（秒）
            /**点击删除方法 *start*/
            let show = this.state.show;
            let num = this.state.num;
            if (num < 1) {
                message.info(infoButtom);
            }
            else {
                show[num - 1] = !this.state.show[num - 1];
                this.setState({
                    show: show,
                    num: num - 1,
                })
            }
            /**点击删除方法 *end*/
                //启动计时器，倒计时time秒后自动关闭计时器。
                //在此时间内再次点击无效
            let index = setInterval(()=>{
                    time1--;
                    if (time1 === 0) {
                        clearInterval(index);
                    }
                }, 350);
        }
    }
    /**删除按钮点击事件  **end**/

    /**Button点击事件，让第二到第八个输入框依次显示  **start**/
    handleClick = () => {
        /**设定计时器以和删除事件配合**/
        if (time2 === 0) {
            time2 = 1; //设定间隔时间（秒）
            /**点击增加方法 *start*/
            let show = this.state.show;
            let num = this.state.num;
            if (num > 6) {
                message.info(infoTop);
            }
            else {
                show[num] = !this.state.show[num];
                this.setState({
                    num: num + 1,
                    show: show,
                })
            }
            /**点击增加方法 *end*/
                //启动计时器，倒计时time秒后自动关闭计时器。
                //在此时间内再次点击无效
            let index = setInterval(()=>{
                    time2--;
                    if (time2 === 0) {
                        clearInterval(index);
                    }

                }, 350);
        }
    };
    /**Button点击事件，让第二到第八个输入框依次显示  **end**/
    
    render() {
        return (
        <QueueAnim className="demo-content" duration={350}>
            {/**show的值为true时显示MulSelect，为false时显示null，初始为false，受button控制**/}
            {this.state.show[0]?
                <button 
                    key="a" 
                    className="btn" 
                    shape="circle" 
                    onClick={this.btnClick}
                />: null}
            {this.state.show[1]?
                <button 
                    key="b" 
                    className="btn" 
                    shape="circle" 
                    onClick={this.btnClick}
                />: null}
            {this.state.show[2]?
                <button 
                    key="c" 
                    className="btn" 
                    shape="circle" 
                    onClick={this.btnClick}
                />: null}
            {this.state.show[3]?
                <button 
                    key="d" 
                    className="btn" 
                    shape="circle" 
                    onClick={this.btnClick}
                />: null}
                </QueueAnim>
        <div className="btn">
            {/**button调用handleClick来控制show的值**/}
            <button onClick={this.handleClick}>增加</button>
        </div>
    )}
}