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

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

該屬性可以對(duì)元素里面的一個(gè)屬性設(shè)置過渡動(dòng)畫，比如：transition: width 2s;

祥見：CSS3 transition 屬性

transition-property 規(guī)定設(shè)置過渡效果的 CSS 屬性的名稱。

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

transition-timing-function規(guī)定速度效果的速度曲線。

transition-delay定義過渡效果何時(shí)開始。

元素動(dòng)畫在出現(xiàn)和消失時(shí)各有3個(gè)階段，可以為這些屬性綁定自定義函數(shù)：

onEnter：進(jìn)入(出現(xiàn))開始時(shí)執(zhí)行

onEntering：進(jìn)入(出現(xiàn))過程中執(zhí)行

onEntered：進(jìn)入(出現(xiàn))結(jié)束執(zhí)行

onExit：離開(消失)時(shí)執(zhí)行

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

onExited：離開(消失)結(jié)束執(zhí)行

其他屬性介紹：

addEndListener：屬性可以監(jiān)聽出現(xiàn)的3個(gè)階段執(zhí)行完成或消失的3個(gè)階段執(zhí)行完成時(shí)執(zhí)行該函數(shù)監(jiān)聽的自定義函數(shù)。

unmountOnExit：為true 代表退出的時(shí)候移除dom，也就是該元素dom動(dòng)畫執(zhí)行完后直接刪除該元素節(jié)點(diǎn)

appear：渲染的時(shí)候就直接執(zhí)行動(dòng)畫，默認(rèn)false

enter：設(shè)為true后，動(dòng)畫進(jìn)入(出現(xiàn))的三個(gè)階段，前兩個(gè)階段onEnter，onEntering先執(zhí)行，然后延遲一段時(shí)間再執(zhí)行onEntered，可以簡(jiǎn)單的理解為動(dòng)畫進(jìn)入(出現(xiàn))時(shí)有個(gè)延遲

exit:設(shè)為true后，動(dòng)畫離開(消失)的三個(gè)階段，前兩個(gè)階段onExit，onExiting先執(zhí)行，然后延遲一段時(shí)間再執(zhí)行onExited，可以簡(jiǎn)單的理解為動(dòng)畫離開(消失)時(shí)有個(gè)延遲

timeout：為上面的appear,enter,exit設(shè)置延遲時(shí)間

in：動(dòng)畫進(jìn)入(出現(xiàn))，離開(消失)交替執(zhí)行，點(diǎn)一下動(dòng)畫生效，再點(diǎn)一下動(dòng)畫失效

用標(biāo)簽可是設(shè)置上面那些屬性。標(biāo)簽內(nèi)容包裹一個(gè)箭頭函數(shù)，該函數(shù)有一個(gè)參數(shù)state(參數(shù)名隨意設(shè)置),返回值就是要實(shí)現(xiàn)動(dòng)畫效果的元素，該元素可以設(shè)置style樣式。

此案例是我測(cè)試的案例，通過下拉框的透明度實(shí)現(xiàn)一個(gè)下拉框出現(xiàn)和消失的效果：

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

// 三個(gè)進(jìn)入狀態(tài)的事件，可以做你想做的事情
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")
};

//測(cè)試動(dòng)畫執(zhí)行過程，何時(shí)結(jié)束
let done =() => {
    console.log("結(jié)束了")
};

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

let addaddEndListener = (node) => { //原生時(shí)間transition運(yùn)動(dòng)的事件
    node.addEventListener("transitionend", this.done, false);
};

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

    render() {
        return 

            {/*首頁導(dǎo)航*/}
            

                

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

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

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

案例一結(jié)束。

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

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

  // 三個(gè)退出的狀態(tài)的事件
  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,
    }
    // 上面的都是基本參數(shù)，樣式的轉(zhuǎn)變以及時(shí)間的設(shè)定，具體的可以看官網(wǎng)文檔
    // 樣式也可以寫成className 例如
    return (
      
        {
          state => {
            console.log(state, "###") //你可以很直觀的看到組件加載和卸載時(shí)候的狀態(tài)
            return(
              

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

案例二結(jié)束。

官方案例

react官網(wǎng)動(dòng)畫庫（react-transition-group）的新寫法