过渡动画组件

基础使用

在项目中可能会有一些动画效果展示或是页面切换效果， react-transition-group是react的第三方模块，这个模块可以实现动画切换效果

0. 安装：npm i -S react-transition-group

1. 使用

   state = {
       show:true
   }
   //执行动画
    handlerToggle = ( ) => {
       this.setState({
           show: !this.state.show
       })
    }
    
    render(){
       return(
       //控制动画是否入场，为true时，动画进场，为false时动画出场
           <CSSTransitio 
               in={this.state.show}
               timeout = {300}
               className:'样式前缀名称'
                unmountOnExit  //元素退场时，自动把DOM也删除>
                <div>玩转React Transition</div>
               </CSSTransitio>
               <button onClick={this.handleToggle}>Animation</button>
       )
    }
               
               
               
   // 自定义样式
   .fade-enter {
     opacity: 0;
     transform: translateX(100%);
   }
   ​
   .fade-enter-active {
     opacity: 1;
     transform: translateX(0);
     transition: all 500ms;
   }
   ​
   .fade-exit {
     opacity: 1;
     transform: translateX(0);
   }
   ​
   .fade-exit-active {
     opacity: 0;
     transform: translateX(-100%);
     transition: all 0ms;
   }
   

结合animate.css

0. 安装：npm i -S react-transition-group

1. 提供的组件库

   • CSSTransition 动画组件

   • SwitchTranstion 切换过渡

   • TransitionGroup 列表动画组件，用来包裹 CSSTransition

2. 使用

   state = {
       show: true
   }
   ​
   //执行动画
     handleToggle = () => {
       this.setState({
         show: !this.state.show
       })
   }
   ​
   render(){
   return (
       <CSSTransition
             in={this.state.show}   //控制动画是否入场，为true时，动画进场，为false时动画出场
             timeout={300}         //动画执行时间
        classNames: '样式前缀名称'
             unmountOnExit  //元素退场时，自动把DOM也删除
             >
                <div>玩转React Transition</div>
       </CSSTransition>
       <button onClick={this.handleToggle}>Animation</button>
   )
   }
   ​
   // 自定义样式
   .fade-enter {
     opacity: 0;
     transform: translateX(100%);
   }
   ​
   .fade-enter-active {
     opacity: 1;
     transform: translateX(0);
     transition: all 500ms;
   }
   ​
   .fade-exit {
     opacity: 1;
     transform: translateX(0);
   }
   ​
   .fade-exit-active {
     opacity: 0;
     transform: translateX(-100%);
     transition: all 0ms;
   }
   

3. 结合animate.css

   • 安装npm install animate.css --save

   • 集成到CssTransation组件中

     <CSSTransition
               in={this.state.show}   //控制动画是否入场，为true时，动画进场，为false时动画出场
               timeout={300}         //动画执行时间
          //自定义的类名（定义动画效果，进场前，进场后直到结束，结束前，结束后）
               classNames={{
                 enter: 'animate__animated',
                 enterActive: 'animate__fadeIn',
                 exit: 'animate__animated',
                 exitActive: 'animate__fadeOut'
               }}     
               unmountOnExit  //元素退场时，自动把DOM也删除
               >
                  <div>玩转React Transition</div>
     </CSSTransition>
     

4. 过度列表

   <TransitionGroup>
       <CSSTransition
             key={变量}  // 通过此key值来判断列表中的子节点需要被插入还是移除，然后触发动画
             timeout={300}         //动画执行时间
        //自定义的类名（定义动画效果，进场前，进场后直到结束，结束前，结束后）
             classNames={{
               enter: 'animate__animated',
               enterActive: 'animate__fadeIn',
               exit: 'animate__animated',
               exitActive: 'animate__fadeOut'
             }}     
             unmountOnExit  //元素退场时，自动把DOM也删除
             >
                <div>玩转React Transition</div>
       </CSSTransition>
       <CSSTransition
             key={变量}  // 通过此key值来判断列表中的子节点需要被插入还是移除，然后触发动画
             timeout={1000}         //动画执行时间
        //自定义的类名（定义动画效果，进场前，进场后直到结束，结束前，结束后）
             classNames={{
               enter: 'animate__animated',
               enterActive: 'animate__fadeIn',
               exit: 'animate__animated',
               exitActive: 'animate__fadeOut'
             }}     
             unmountOnExit  //元素退场时，自动把DOM也删除
             >
                <div>玩转React Transition</div>
       </CSSTransition>
   </TransitionGroup>
   

5. 路由过渡

   在有些应用中，路由之间的切换有过渡动画效果，可以使用此库完成路由过渡效果

   # 定义高阶组件
   import React, { Component } from 'react'
   import { CSSTransition } from 'react-transition-group'
   import '../assets/animate.css'
   ​
   const withAnimation = Cmp => {
     return class extends Component {
       render() {
         return (
           <CSSTransition
             in={this.props.match !== null}
             timeout={300}
             classNames={{
               enter: 'animate__animated',
               enterActive: 'animate__fadeIn',
               exit: 'animate__animated',
               exitActive: 'animate__fadeOut'
             }}
             unmountOnExit
           >
             <Cmp {...this.props} />
           </CSSTransition>
         )
       }
     }
   }
   ​
   export default withAnimation
   ​
   # 使用
   @withAnimation
   class Page extends Component {
       render() {
         return <div>高阶组件完成路由切换动画效果</div>
       }
   }
   ​
   // 使用高阶组件定义路由动画组件是一定要用它的Route children来渲染组件
   <Route path="/home" children={router => <Page {... router} />} />
   

\