React中使用CSSTransitionGroup插件實現輪播圖

時間 2019-12-11

標籤 react 使用 csstransitiongroup 插件實現欄目 React 简体版

原文原文鏈接

　　動畫效果，是一個頁面上必不可少的功能，學習一個新的東西，固然就要學習，如何用新的東西，用它的方法去實現之前的東西啦。今天呢，我就在這裏介紹一個試用react-addons-css-transition-group插件，在react中實現輪播圖效果。css

　　首先，你們須要瞭解的是，頁面中的動畫，能夠分爲兩種，一種是js動畫，這是用js腳原本驅動的動畫，另外一種呢，就是用css的transiton和animation來實現的動畫效果。而我要講的插件，就是利用CSS的Transition和animation來實現組件的出場和入場動畫。html

　　因此呢，我將先給你們簡單介紹一下transition和animation，而後在介紹如何使用react-addons-css-transition-group插件，最後附上我實現的輪播圖。react

1. CSS3 transition

　　如今假設咱們想讓一個元素，當咱們hover時，它的寬高從50px變爲100px。webpack

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            width: 50px;
            height: 50px;
            background-color: #f00;
        }
        .box:hover {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

　　若是咱們之間運行上面這段代碼，當咱們hover時，元素大小瞬間就變成了100x100，很突兀，視覺效果不好。css3

　　若是咱們使用過渡transition屬性的話，咱們就可讓元素在咱們指定的時間內，完成50x50到100x100的過渡動畫。git

.box:hover {
    width: 100px;
    height: 100px;
    /* 指定過渡動畫執行的時間，以及要執行動畫的屬性，
        若是不指定直接改變，這裏咱們制定了寬高執行1s的過渡動畫 */
    transition: 1s width, 1s height;
}

　　能夠看到，使用transition後，變化就再也不那麼生硬了。咱們還能夠經過設置transition-delay，transition-timing-function 來設置延遲時間和過渡使用的變化函數。github

　　固然從上面的動態圖，你也能夠發現，transition的缺點，好比只有開始和結束兩個狀態，不能設置中間態，以及必須須要事件驅動，一條規則對應一個屬性等。所以css3 animation屬性出現啦。web

2. CSS3 animation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            -moz-animation: rainbow 5s; /* Firefox */
        }

        @-moz-keyframes rainbow {
            0% {
                background-color: #f40;
            }
            16% {
                background-color: #FF6100;
            }
            33% {
                background-color: #FF0;
            }
            50% {
                background-color: #0F0;
            }
            66% {
                background-color: #00F;
            }
            83% {
                background-color: #0FF;
            }
            100% {
                background-color: #A020F0;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

　　最終執行效果爲：數組

　　動畫是使元素從一種樣式逐漸變化爲另外一種樣式的效果，咱們使用animation屬性指定這個屬性播放的動畫名稱，事件，動畫函數等，咱們用keyframes定義動畫，規定在動畫在關鍵幀樣式。這是一個css3屬性，在各大瀏覽器中使用，咱們須要加相應的前綴。瀏覽器

　　咱們還能夠經過animation的一些屬性，自定義設置, 如延遲，結束狀態，中止狀態等等。

3. React react-addons-css-transition-group插件

　　react-addons-css-transition-group插件，就是在上面兩個css屬性上實現，就像以前說的那樣，它是利用css的transition和animation實現組件的進場和出場動畫的。ReactCSSTransitionGroup是在ReactTransitionGroup的基礎上進行再封裝。

　　我先直接附上個人代碼，而後進行詳細講解。

import React, {PropTypes} from 'react';
import CSSTransitionGroup from 'react-addons-css-transition-group';

/* 定義參數類型 */
const propTypes = {
    imageSrc: PropTypes.array.isRequired, 
    currentIndex: PropTypes.number.isRequired,
    enterDelay: PropTypes.number.isRequired,
    leaveDelay: PropTypes.number.isRequired,
    name: PropTypes.string.isRequired,
    component: PropTypes.string.isRequired
}

/* 輪播圖片組件，無狀態組件 */
function CarouselImage(props) {
　　/* 對象解析，參數分別對應：圖片地址數組，當前展現圖片索引，進場動畫執行時間，出場動畫執行時間，transition對應惟一key值，自動生成的包裹元素類型 */
    let {imageSrc, currentIndex, enterDelay, leaveDelay, name, component} = props;

    return (
        <ul className="carousel-image">
            <CSSTransitionGroup
                component={component}
                transitionName={name}
                transitionEnterTimeout={enterDelay}
                transitionLeaveTimeout={leaveDelay}
                className={name}>
                <img 
                    src={imageSrc[currentIndex]} 
                    key={imageSrc[currentIndex]} 
                />
            </CSSTransitionGroup>
        </ul>
    );
}    

CarouselImage.propTypes = propTypes;

export default CarouselImage;

　　1. ReactCSSTransitionGroup工做原理

　　當組件出現時，會在組件添加transitionName-appear類（transitionName由咱們本身設置值），而後下一時刻會給組件添加transitionName-appear-active類；當組件進場時，給組件添加transitionName-enter類,而後下一時刻會給組件添加transitionName-enter-active類；當組件出場時，會給組件添加transitionName-leave類，而後下一時刻輝給組件添加transitionName-leave-active類，咱們則能夠在css文件中，經過設置transition，設置咱們須要執行的動畫。

　　通常狀況下，咱們主要使用後兩種，而且，只有當組件的出場動畫徹底執行玩之後，組件纔會被移除。

　　2. ReactCSSTransitionGroup組件參數

　　ReactCSSTransitionGroup其實就是一個組件，它規定了特定的參數，咱們經過設置這些特定的參數，將這些參數反應到被其包裹的子組件中。下面，咱們就其幾個常見的參數進行講解。

　　# transitionName: 設置動態生成類的自定義前綴，若是咱們設置爲carousel-image-item，那麼，就會相應的生成carousel-image-item-enter, carousel-image-item-enter-active等。

　　# component: 字符串，設置ReactCSSTransitionGroup生成包裹子組件的標籤，默認時span，咱們能夠經過這個參數自定義，如div。

　　# transitionEnter: 布爾值，設置是否使用出場動畫，默認時true。

　　# transitionEnterTimeout: 數值，設置入場動畫的執行時間，須要在css中和這裏同時設置，不然會提示警告。

　　# transitionLeave: 布爾值，設置是否使用出場動畫，默認時true。

　　# transitionLeaveTimeout: 數值，設置出場動畫的執行時間，須要在css中和這裏同時設置，不然會提示警告。

　　最後，說一下transitionAppear，它和其餘兩個不一樣，它默認時false，默認不執行。

　　3. 使用步驟

　　1）引包

　　import CSSTransitionGroup from 'react-addons-css-transition-group'; // ES6引包語法

　　2）將 CSSTransitionGroup組件添加到render中

    return (
        <ul className="carousel-image">
            <CSSTransitionGroup
                component={component}
                transitionName={name}
                transitionEnterTimeout={enterDelay}
                transitionLeaveTimeout={leaveDelay}
                className={name}>
                <img 
                    src={imageSrc[currentIndex]} 
                    key={imageSrc[currentIndex]} 
                />
            </CSSTransitionGroup>
        </ul>
    );

　　在這裏須要注意的是：CSSTransitionGroup組件須要添加到已經掛載到頁面上的dom元素中（能夠理解爲，須要放在render函數中，且須要被包裹），或者transitionAppear設置爲true的組件上。

　　最後，咱們只需在本身的css文件中，添加對應類的樣式便可。

　　咱們能夠在咱們的生成的頁面中看到下面結果：

　　最後的最後，提一下六個TransitionGroup組件生命週期吧。其實咱們上面使用的是別人給咱們封裝好的，咱們直接添加參數，就能夠實現這些效果，可是這隻能實現簡單的出場入場效果，若是要自定義一些動畫的話，咱們就須要經過在這些聲明週期中設置回調函數，自定義動畫。下面咱們來簡單瞭解一下着六個生命週期函數吧。

　　1）ComponentWillAppear：組件將要出現時調用

　　2) ComponentDidAppear：組件出現時調用

　　3) ComponentWillEnter：組件將要進場時調用

　　4) ComponentDidEnter：進場的下一時刻調用

　　5) ComponentWillLeave：組件將要出場時調用

　　6) ComponentDidLeave：出場的下一時刻調用