react-transition-group動畫庫Transition組件使用

時間 2021-02-13

標籤 css vue node react redux 小程序 segmentfault antd react-router app 欄目 React 简体版

原文原文鏈接

react-transition-group動畫庫

這個庫包括3個組件：Transition,CSSTransition,TransitonGroup，今天作項目恰好用到了Transition組件，記錄一下使用過程當中的總結，另外兩個組件用到了再作介紹。或者移步到react 官網動畫庫（react-transition-group）的新寫法css

CSS3的transition屬性

該屬性能夠對元素裏面的一個屬性設置過渡動畫，好比：transition: width 2s;vue

祥見：CSS3 transition 屬性node

transition-property 規定設置過渡效果的 CSS 屬性的名稱。
transition-duration 規定完成過渡效果須要多少秒或毫秒。
transition-timing-function規定速度效果的速度曲線。
transition-delay定義過渡效果什麼時候開始。

Transition的屬性

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

onEnter：進入(出現)開始時執行
onEntering：進入(出現)過程當中執行
onEntered：進入(出現)結束執行
onExit：離開(消失)時執行
onExiting：離開(消失)過程當中執行
onExited：離開(消失)結束執行

其餘屬性介紹：redux

addEndListener：屬性能夠監聽出現的3個階段執行完成或消失的3個階段執行完成時執行該函數監聽的自定義函數。
unmountOnExit：爲true 表明退出的時候移除dom，也就是該元素dom動畫執行完後直接刪除該元素節點
appear：渲染的時候就直接執行動畫，默認false
enter：設爲true後，動畫進入(出現)的三個階段，前兩個階段onEnter，onEntering先執行，而後延遲一段時間再執行onEntered，能夠簡單的理解爲動畫進入(出現)時有個延遲
exit:設爲true後，動畫離開(消失)的三個階段，前兩個階段onExit，onExiting先執行，而後延遲一段時間再執行onExited，能夠簡單的理解爲動畫離開(消失)時有個延遲
timeout：爲上面的appear,enter,exit設置延遲時間
in：動畫進入(出現)，離開(消失)交替執行，點一下動畫生效，再點一下動畫失效

使用方法

用<Transition>標籤但是設置上面那些屬性。標籤內容包裹一個箭頭函數，該函數有一個參數state(參數名隨意設置),返回值就是要實現動畫效果的元素，該元素能夠設置style樣式。小程序

案例一

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

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 <header className='headerNavBox'>
            {/*首頁導航*/}
            <div className='homeBox'>
                <div className='baseBox clearfix' >
                    <h1 className='logo' >大魚資源網</h1>
                    <Icon className='icon' type='bars' style={{
                    fontSize:'.6rem'
                    }} onClick={ev=>{
                        this.setState({
                            in:!this.state.in
                        })
                    }} />
                </div>
                {/*下拉條，過渡動畫*/}
                <Transition
                    onEnter={onEnter}
                    onEntering={onEntering}
                    onEntered={onEntered}

                    onExit={onExit}
                    onExiting={onExiting}
                    onExited={onExited}

                    addEndListener={this.addaddEndListener}//添加動畫執行完後執行的函數
                    unmountOnExit={true}//動畫消失後，元素dom節點也消失
                    appear={false}//組件渲染就出現動畫
                    enter={true}//動畫效果出現時延遲,默認是true
                    exit={true}//動畫效果消失時延遲
                    timeout={duration}//設置延遲時間，準確的說應該是動畫出現和消失的第三階段延遲時間，由於前兩個階段會當即執行
                    in={this.state.in} >
                    {
                        state => {
                            //打印狀態變化分別是onEnter,onEntering...等6種，經過此處能夠看出延遲時間是在第三階段生效，前兩個階段會當即執行
                            console.log(state,'###',{...defaultStyle, ...transitionStyles[state]}, '###');
                            return <ul className='filterBox' style={{
                                ...defaultStyle,
                                //根據state的變化，過渡動畫的透明度隨着變化
                                ...transitionStyles[state]
                            }} >
                                <li>所有課程</li>
                                <li>react課程</li>
                                <li>vue課程</li>
                                <li>小程序課程</li>
                            </ul>
                        }
                    }
                </Transition>
            </div>
        </header>;
    }
}

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

案例一結束。antd

案例二

//本身簡單的封裝了一個，該有的參數都由了，能夠自行粘貼在本身的代碼裏面去試試。
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 例如<MyComponent className={`fade fade-${status}`} />
    return (
      <Transition 
        onEnter={this.onEnter}
        onEntering={this.onEntering}
        onEntered={this.onEntered}

        onExit={this.onExit}
        onExiting={this.onExiting}
        onExited={this.onExited}

        addEndListener={this.addaddEndListener} 
        in={inProp} 
        unmountOnExit={false} // 爲true 表明退出的時候移除dom
        appear={true} // 爲true  渲染的時候就直接執行動畫，默認false，
        timeout={duration}
      >
        {
          state => {
            console.log(state, '###') //你能夠很直觀的看到組件加載和卸載時候的狀態
            return(
              <div style={{
                ...defaultStyle,
                ...transitionStyles[state]
              }}>
                {this.props.children}
              </div>
            )
          }
        }
      </Transition>
    );
  }
}

案例二結束。react-router