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)