react react-transition-group动画插件

素颜马尾好姑娘i 2021-07-24 15:23 333阅读 0赞

设置一组动画
    	内部只能有一个容器包裹！！！
    	
    	1、安装
    		cnpm install react-transition-group --save
    		
    	2、引入
    		import { CSSTransition } from 'react-transition-group';
    	
    	3、使用
    		<CSSTransition
    			in={show}    动画触发布尔值
    	        timeout={n}   动画时间n毫秒,尽量和内部设置的过渡时间一样,否则优先级大于内部设置的过渡时间
    	        classNames='xx'  设置出现隐藏动画的类名
    	        unmountOnExit  当元素隐藏时,删除其dom元素,不保留空间,出现时创建
    	        onEntered={动画进场结束时的回调函数,第一个参数是包裹的所有dom对象}
    	        appear={true}  是否设置第一次出现时有动画,默认为否
    		>
    			标签...
    		</CSSTransition>
    		
    	4、动画类
    		.xx-enter,.xx-exit-done  刚入场/离场结束
    		.xx-enter-done,.xx-exit  入场结束/刚离场
    		.xx-enter-active,.xx-exit-active   入场过程/离场过程
    		
    		配合appear={true}时,第一次加载时的出现动画
    		.xx-appear		刚出现
    		.xx-appear-active  出现过程
    		.xx-appear-done   出现结束
    	
    	5、动画钩子函数,对应动画的不同时期,第一个参数都是内部包含的dom对象
    		onEnter
    		onEntering
    		onEntered
    		
    		onExit
    		onExiting
    		onExited
    		
    设置多组动画
    	如数组增加时,每一个元素的动画
    
    	1、安装
    		cnpm install react-transition-group --save
    		
    	2、引入
    		import { CSSTransition,TransitionGroup } from 'react-transition-group';
    	
    	3、使用
    		TransitionGroup和CSSTransition之间不能有任何除文本以外的其他任何元素(如标签)!!!
    	
    		<TransitionGroup className="todo-list">
    		{
    			{show.map((item,index)=>
    	              (
    		            <CSSTransition
    		            	in属性不需要
    		            	key={x}
    						...
    		              >
    		               内容
    		              </CSSTransition>
    		          )
    	           )
                }
    		}

代码示例:  
单组动画:

import React,{ useState} from 'react';
    import './App.css';
    import {  CSSTransition } from 'react-transition-group';
     
      
    
    function App() { 
      const [show,setShow] = useState(true);
    
      return (
        <div className="App">
    
          <CSSTransition
            in={ show}
            timeout={ 1000}
            classNames='fade'
            unmountOnExit
            onEntered={ (el)=>{ console.log(el.style.color='red')}}
            appear={ true}
          >
            <div className='d1'>
              hello
            </div>  
          </CSSTransition>
          <button onClick={ ()=>{ setShow(!show);console.log(show)}}>切换</button>
    
        </div>
      );
    }
    
    export default App;

--------------------

.fade-enter
    { 
      opacity: 0;
    }
      .fade-enter-active
    { 
      opacity: 1;
      transition: opacity 1s ease-in;
    }
    .fade-enter-done
    { 
      opacity: 1;
    }
    .fade-exit
    { 
      opacity: 1;
    }
    .fade-exit-active
    { 
      opacity: 0;
      transition: opacity 1s ease-in;
    }
    .fade-exit-done
    { 
      opacity: 0;
    }
    .fade-appear
    { 
      opacity: 0;
      font-size: 30px;
    }
    .fade-appear-active
    { 
      opacity: 1;
      transition: opacity 1s ease-in;
    }
    .fade-appear-done
    { 
      opacity: 1;
    }
    
    
    .d1{ 
    
    }

多组动画:

import React,{ useState} from 'react';
    import './App.css';
    import {  CSSTransition,TransitionGroup } from 'react-transition-group';
     
      
    
    function App() { 
      const [show,setShow] = useState(['hh']);
    
      return (
        <div className="App">
          <TransitionGroup className="todo-list">
              { show.map((item,index)=>
                  (
                    <CSSTransition
                    timeout={ 1000}
                    classNames='fade'
                    key={ index}
                  >
                    <div key={ index}>{ item}</div>
                  </CSSTransition>
                  )
               )}
            </TransitionGroup>
            <button onClick={ ()=>{ setShow([...show,'hh']);console.log(show)}}>切换</button>
        </div>
      );
    }
    
    export default App;

--------------------