摘要：動畫庫這個庫包括個組件，今天做項目剛好用到了組件，記錄一下使用過程中的總結，另外兩個組件用到了再做介紹。規定完成過渡效果需要多少秒或毫秒。規定速度效果的速度曲線。參考網址官方案例官網動畫庫的新寫法

這個庫包括3個組件：Transition,CSSTransition,TransitonGroup，今天做項目剛好用到了Transition組件，記錄一下使用過程中的總結，另外兩個組件用到了再做介紹?；蛘咭撇降絩eact 官網動畫庫（react-transition-group）的新寫法

該屬性可以對元素里面的一個屬性設置過渡動畫，比如：transition: width 2s;

祥見：CSS3 transition 屬性

transition-property 規定設置過渡效果的 CSS 屬性的名稱。

transition-duration 規定完成過渡效果需要多少秒或毫秒。

transition-timing-function規定速度效果的速度曲線。

transition-delay定義過渡效果何時開始。

元素動畫在出現和消失時各有3個階段，可以為這些屬性綁定自定義函數：

onEnter：進入(出現)開始時執行

onEntering：進入(出現)過程中執行

onEntered：進入(出現)結束執行

onExit：離開(消失)時執行

onExiting：離開(消失)過程中執行

onExited：離開(消失)結束執行

其他屬性介紹：

addEndListener：屬性可以監聽出現的3個階段執行完成或消失的3個階段執行完成時執行該函數監聽的自定義函數。

unmountOnExit：為true 代表退出的時候移除dom，也就是該元素dom動畫執行完后直接刪除該元素節點

appear：渲染的時候就直接執行動畫，默認false

enter：設為true后，動畫進入(出現)的三個階段，前兩個階段onEnter，onEntering先執行，然后延遲一段時間再執行onEntered，可以簡單的理解為動畫進入(出現)時有個延遲

exit:設為true后，動畫離開(消失)的三個階段，前兩個階段onExit，onExiting先執行，然后延遲一段時間再執行onExited，可以簡單的理解為動畫離開(消失)時有個延遲

timeout：為上面的appear,enter,exit設置延遲時間

in：動畫進入(出現)，離開(消失)交替執行，點一下動畫生效，再點一下動畫失效

用標簽可是設置上面那些屬性。標簽內容包裹一個箭頭函數，該函數有一個參數state(參數名隨意設置),返回值就是要實現動畫效果的元素，該元素可以設置style樣式。

此案例是我測試的案例，通過下拉框的透明度實現一個下拉框出現和消失的效果：

import React from "react";
import {connect} from "react-redux";
//受到路由管控
import {withRouter} from "react-router-dom";
import {Icon} from "antd";
//過渡動畫
import Transition from "react-transition-group/Transition";
//duration設置延遲時間，下面的timeout屬性使用
const duration = {
         appear:3000,
         enter: 3000,
         exit: 3000};
//默認樣式
const  defaultStyle = {
        //ease-in-out規定以慢速開始和結束的過渡效果
        transition:`opacity ${3000}ms ease-in-out`,
        opacity:0,
    };
//過渡樣式
const  transitionStyles = {
        //進入時2，3階段動畫，如果設置了延遲時間，會發現出現時立即透明度百分之"0.5"，然后三秒后透明度才為"1"
        //因為延遲時間timeout屬性設置的``enter：3000``會在第三階段生效
        entering:{opacity: 0.5},
        entered:{opacity:1},
        //離開時2，3階段
        exiting: {opacity: 0.5},
        exited: {opacity: 0}
    };

// 三個進入狀態的事件，可以做你想做的事情
let onEnter = (node, isAppearing) => {
    console.log(isAppearing,node, "onEnter")
};
let onEntering = (node, isAppearing) => {
    console.log(isAppearing,node, "onEntering")
};
let onEntered = (node, isAppearing) => {
    console.log(isAppearing,node,"onEntered")
};

//測試動畫執行過程，何時結束
let done =() => {
    console.log("結束了")
};

// 三個退出的狀態的事件
let onExit = (node) => {
    console.log("onExit")
};
let onExiting = (node) => {
    console.log("onExiting")
};
let onExited = (node) => {
    console.log("onExited",node)
};

let addaddEndListener = (node) => { //原生時間transition運動的事件
    node.addEventListener("transitionend", this.done, false);
};

class NavTop extends React.Component{
    constructor(props,context){
        super(props,context);
        this.state = {
          in:false
        };
    }

    render() {
        return 

            {/*首頁導航*/}
            

                

                    
大魚資源網
                    {
                        this.setState({
                            in:!this.state.in
                        })
                    }} />
                
                {/*下拉條，過渡動畫*/}
                
                    {
                        state => {
                            //打印狀態變化分別是onEnter,onEntering...等6種，通過此處可以看出延遲時間是在第三階段生效，前兩個階段會立即執行
                            console.log(state,"###",{...defaultStyle, ...transitionStyles[state]}, "###");
                            return 

                                
全部課程
                                
react課程
                                
vue課程
                                
小程序課程
                            
                        }
                    }
                
            
        
;
    }
}

export default withRouter(connect()(NavTop));

案例一結束。

//自己簡單的封裝了一個，該有的參數都由了，可以自行粘貼在自己的代碼里面去試試。
class Fade extends React.Component {
  constructor(props) {
    super(props);
  }
  done =() => {
    // console.log("結束了")
  }
  addaddEndListener = (node) => { //原生時間transition運動的事件
    node.addEventListener("transitionend", this.done, false);
  }

  // 三個進入狀態的事件，可以做你想做的事情
  onEnter = (node, isAppearing) => {
    console.log(isAppearing, "onEnter")
  }
  onEntering = (node, isAppearing) => {
    console.log(isAppearing, "onEntering")
  }
  onEntered = (node, isAppearing) => {
    console.log(isAppearing, "onEntered")
  }

  // 三個退出的狀態的事件
  onExit = (node) => {
    console.log("onExit")
  }
  onExiting = () => {
    console.log("onExiting")
  }
  onExited = () => {
    console.log("onExited")
    this.props.self()
  }
  render() {
    const { in: inProp, dur} = this.props;
    const defaultStyle = {
      transition: `transform ${300}ms ease-in-out, opacity ${300}ms ease-in-out`,
      transform: "translateX(100px)",
      opacity: "0"
    }

    const transitionStyles = {
      entering: { transform: "translateX(100px)", opacity: "0"},
      entered:  { transform: "translateX(0px)", opacity: "1" },
      exiting: {transform: "translateX(0px)", opacity: "1"},
      exited: {transform: "translateX(0px)", opacity: "0"}
    };
    const duration = {
      enter: 300,
      exit: 300,
    }
    // 上面的都是基本參數，樣式的轉變以及時間的設定，具體的可以看官網文檔
    // 樣式也可以寫成className 例如
    return (
      
        {
          state => {
            console.log(state, "###") //你可以很直觀的看到組件加載和卸載時候的狀態
            return(
              

                {this.props.children}
              
            )
          }
        }
      
    );
  }
}

案例二結束。

官方案例

react官網動畫庫（react-transition-group）的新寫法