react中动画的实现

在react中动画的实现 有三种：

1，原生js和css的实现；

2，React官方的ReactCssTransitionGroup 过渡动画；

3，ant的Motion;

这里说下ant的Motion

安装

cnpm i --save rc-queue-anim

然后在 需要加入的页面 引入

import QueueAnim from "rc-queue-anim";

 这样就可以以标签的形式使用了，例如：

  <QueueAnim delay={100}>

                    {this.props.chat.chatmsg.filter((v)=>v.chatid===chatid).map((v,i)=>{
                       // return (<p key={v._id}>{v.content} </p>)
                        return (<div key={i}>

                            {v.from===chatman?
                            <List>
                                    <List.Item
                                      thumb={require(`../../component/avatarselector/img/${users[chatman].avatar}.png`)}
                                    >{users[chatman].name}:{v.content}</List.Item>

                            </List>
                            :
                                <List  id="chatman">
                                    <List.Item  className="pp"
                                    extra={<img src={require(`../../component/avatarselector/img/${users[user].avatar}.png`)} />}
                                    > 我: {v.content}</List.Item>

                                </List>}


                                </div>

                            )

                    })}
                    </QueueAnim>

 这样 这个组件就会拥有进场动画了；

所有的option 都放到该标签的属性；

进出场动画只能渲染一个router；