react Ant Motion設置動畫

1、安裝
	cnpm install rc-queue-anim --save
	
2、引入
	import QueueAnim from 'rc-queue-anim';
	
3、使用:
  <QueueAnim delay={300} className="queue-simple">
    <div key="a">Queue Demo</div>
    <div key="b">Queue Demo</div>
    <div key="c">Queue Demo</div>
    <div key="d">Queue Demo</div>
  </QueueAnim>

代碼示例:

import React,{Component} from 'react'
import {connect} from 'react-redux'
import {NavBar, List, InputItem,Grid} from 'antd-mobile'
import {sendMsg,readMsg} from '../../redux/actions'
import  QueueAnim from 'rc-queue-anim'

import './index.css'

const Item = List.Item

class App extends Component{
    state={
        content:'',
        isShow:false,
    }
    componentWillMount()
    {
        const emojis = ['😀', '😁', '🤣','😀', '😁', '🤣','😀', '😁', '🤣','😀', '😁', '🤣','😀'
        ,'😁', '🤣','😀', '😁', '🤣','😀', '😁', '🤣','😀', '😁', '🤣'
        ,'😁', '🤣','😀', '😁', '🤣','😀', '😁', '🤣','😀', '😁', '🤣'
        ,'😁', '🤣','😀', '😁', '🤣','😀', '😁', '🤣','😀', '😁', '🤣']
      this.emojis = emojis.map(emoji => ({text: emoji}))
    }
    componentDidMount() {
        // 初始顯示列表
        window.scrollTo(0, document.body.scrollHeight)

        
    }
    componentDidUpdate () {
        // 更新顯示列表    
        window.scrollTo(0, document.body.scrollHeight)
    }

   render()
   {
       const {user}=this.props
       const {users,chatMsgs}=this.props.chat
       //計算當前聊天的chatId
       const meId=user._id;
       if(!users[meId])
       {
           return null;
       }
       const targetId=this.props.match.params.userid;
       const chatId=[meId,targetId].sort().join('-');
       const msgs=chatMsgs.filter(msg=>msg.chat_id==chatId)
       //頭像
       const targetHeader=users[targetId].header;

       const targetIcon=require(`../../assets/imgs/${targetHeader}.png`)

       return(

        <div id='chat-page'>
            <NavBar>{users[targetId].username}</NavBar>
            <List style={{marginBottom:'50px'}}>
            <QueueAnim
                type='alpha'
                delay={100}
            >
                {
                   msgs.map(msg=>{
                        if(meId===msg.to) //對方發給我的
                        {

                            return  <Item
                                    key={msg._id}
                                     thumb={targetIcon}
                                    >
                                        {msg.content}
                                    </Item>
                        }else{
                            return  <Item
                                     key={msg._id}
                                     className='chat-me'
                                     extra='我'
                                    >
                                        {msg.content}
                                    </Item>
                        }
                    })
                }
            </QueueAnim>
                
            </List>
            <div style={{position:'fixed',bottom:'0',width:'100%'}}>
                <InputItem
                    onChange={val=>this.setState({content:val})}
                    placeholder="請輸入"
                    value={this.state.content}
                    extra={
                    <span>
                        <span onClick={()=>{this.setState({isShow:!this.state.isShow})}}>😀</span>    
                        <span onClick={this.send}>發送</span>
                    </span>

                    }
                />
                {
                    this.state.isShow ? (
                        <Grid
                            data={this.emojis}
                            columnNum={8}
                            carouselMaxRow={4}
                            isCarousel={true}
                            onClick={(item) => {
                                this.setState({content: this.state.content + item.text})
                            }}
                            />
                        )
                        : null
                }
            </div>
        </div>


       )
   }
   send=()=>{
    //收集數據
       const from=this.props.user._id;
        //獲取點擊的消息框的用戶的userid，動態路由
       const to=this.props.match.params.userid;
       //獲取輸入框的內容
       const content=this.state.content;
    //發送請求
        if(content)
        {
            this.props.sendMsg({from,to,content});
        }
    //清除輸入數據
    this.setState({
        content:''
    })

   }
}

export default connect((state)=>({
    user:state.user,chat:state.chat
}),{sendMsg})(App)