React动画react-transition-group安装使用

喜欢ヅ旅行 2021-12-03 14:25 494阅读 0赞

**可以登录https://github.com，在github上搜索react-transition-group**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODA0Mw_size_16_color_FFFFFF_t_70]  
**搜索出结果，点击星多的项目**![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODA0Mw_size_16_color_FFFFFF_t_70 1]  
**这里有个主文档，点击进入**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODA0Mw_size_16_color_FFFFFF_t_70 2]

## **安装语句有两种,在自己项目的目录里安装** ##

# npm #

npm install react-transition-group --save

# yarn #

yarn add react-transition-group  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODA0Mw_size_16_color_FFFFFF_t_70 3]  
**Components里有各种案例和说明，喜欢看文档的小伙伴可以看看**

## 普通React加动画效果 ##

js代码

import React,{  Component,Fragment } from 'react';
    import './test.css';//引入样式
    
    class Test3 extends Component{ 
        constructor(props){ 
            super(props);
            this.state={ 
                show:true
            }
            this.handleToggle=this.handleToggle.bind(this)
        }
    
        render(){ 
            return(
                <Fragment>
                    <div className={ this.state.show?'show':'hide'}>hello</div>
                       
                    <button onClick={ this.handleToggle}>toggle</button>             
                </Fragment>
            ) 
        }
        handleToggle(){ 
            this.setState({ 
                show:this.state.show?false :true
            })
        }
    }
    export default Test3;

test.css代码

.show{ animation: show-item 1s ease-in forwards}
    .hide{ animation: hide-item 1s ease-in forwards}
    @keyframes hide-item{ 
        0%{ 
            opacity: 1;
            color: red;
        }
        50%{ 
            opacity: 0.5;
            color: green;
        }
        100%{ 
            opacity: 0;
            color: blue;
        }
    }
    @keyframes show-item{ 
        0%{ 
            opacity: 0;
            color: red;
        }
        50%{ 
            opacity: 0.5;
            color: green;
        }
        100%{ 
            opacity: 1;
            color: blue;
        }
    }

## 引入react-transition-group模块使用 ##

js代码

import React,{  Component,Fragment } from 'react';
    import './test.css';//引入样式
    import {  CSSTransition,TransitionGroup } from 'react-transition-group';//引入react-transition-group模块
    
    class Test3 extends Component{ 
        constructor(props){ 
            super(props);
            this.state={ 
                list:[],
                show:true
            }
            this.handleToggle=this.handleToggle.bind(this)
            this.handleAddItem=this.handleAddItem.bind(this)
        }
    
        render(){ 
            return(
                <Fragment>
                        <CSSTransition
                            in={ this.state.show}// 如果this.state.show从false变为true，则动画入场，反之out出场
                            timeout={ 1000}//动画时间
                            classNames='fade'//自定义class名称
                            unmountOnExit//可选，当动画出场后在页面上移除包裹的dom节点
                            onEntered={ (el)=>{ el.style.color='blue'}}//可选，动画入场之后的回调，el指被包裹的dom，让div内的字体颜色等于蓝色
                            onEnter={ (el)=>{ el.style.color='red'}}//可选，el指被包裹的dom，动画一开始的样式回调函数
                            appear={ true}//可选，dom节点一开始出现在页面上是否出现动画效果
                        >
                            <div>hello</div>
                        </CSSTransition>
                    <button onClick={ this.handleToggle}>改变hello动画</button> 
                    
                    
                     <TransitionGroup>
                   { 
                      
                        this.state.list.map((item,index)=>{ 
                            return(
                                <CSSTransition
                                key={ index}
                                    timeout={ 1000}//动画时间
                                    classNames='fade'//自定义class名称
                                    unmountOnExit//可选，当动画出场后在页面上移除包裹的dom节点
                                    onEntered={ (el)=>{ el.style.color='blue'}}//可选，动画入场之后的回调，el指被包裹的dom，让div内的字体颜色等于蓝色
                                    onEnter={ (el)=>{ el.style.color='red'}}//可选，el指被包裹的dom，动画一开始的样式回调函数
                                    appear={ true}//可选，dom节点一开始出现在页面上是否出现动画效果
                                >
                                   <div>{ item}</div>
                                </CSSTransition>
                               
                            )
                        })
                   }
                   </TransitionGroup>
                    <button onClick={ this.handleAddItem}>加内容出现动画效果</button>
    
                </Fragment>
            ) 
        }
        handleToggle(){ 
            this.setState({ 
                show:this.state.show?false :true
            })
        }
        handleAddItem(){ 
            this.setState((prevState)=>{ 
                return{ 
                    list:[...prevState.list,'item']
                }
            })
        }
    }
    
    export default Test3;

test.css代码

.fade-enter,.fade-appear{ opacity: 0;} /* enter是入场前的刹那（点击按钮），appear指页面第一次加载前的一刹那（自动） */
    .fade-enter-active,.fade-appear-active{ opacity: 1;transition: opacity 1s ease-in}  /* enter-active指入场后到入场结束的过程，appear-active则是页面第一次加载自动执行 */
    .fade-enter-done,.fade-appear-done{ opacity: 1;} /* 入场动画执行完毕后，保持状态 */
    
    
    .fade-exit{ opacity: 1;}/* 出场动画开始 */
    .fade-exit-active{ opacity: 0;transition: opacity 1s ease-in}/* 出场动画开始到结束的过程 */
    .fade-exit-done{ opacity: 0;}/* 出场动画执行完毕后，保持状态 */

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODA0Mw_size_16_color_FFFFFF_t_70]: /images/20211203/29043393bfc94cb89847051faa8f17f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODA0Mw_size_16_color_FFFFFF_t_70 1]: /images/20211203/239c14e046944306af09a2fe335a647c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODA0Mw_size_16_color_FFFFFF_t_70 2]: /images/20211203/b1f594b6b4d14f8bbf74ead83695057f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk2ODA0Mw_size_16_color_FFFFFF_t_70 3]: /images/20211203/d7526f70856c4023bfdcb538f8f8bdbb.png