使用React建立Page-Loading（過渡頁面）

Introduction

項目已開源能夠在Github上下載查看
該項目靈感來源於Codrops，有一個想法是將Codrops上的優秀Demo寫成React component,在封裝成組件供項目使用

結構介紹

一般有兩種方法去實現Page的切換過渡效果，一種是經常使用的是經過addClass和removeClass來對Class進行操做，Class對應的CSS，從而實現效果，還有一種方法是Inline Style，對React來說是一種很不錯的方法直接修改CSS，從而實現各類效果，由於習慣問題暫時使用前者

1.加載頁面

加載頁都屬於Header，分爲Logo和Loader兩個部分

2.主頁面

主頁面有Header和Main兩個模塊，Header的position已經變成absolute，只剩下Logo部分，而Loader部分移動到沒法顯示的位置，過渡效果不明講，請查看Demo

代碼實現

1.直接render的頁面（爲了方便沒有繼續分紅相應的組件）

var Main = React.createClass({

    getInitialState() {
        return{
            demo : " ",
            container : "ip-container loading"
        };
    },

    componentDidMount() {
        this._startLoading();
    },

    render() {
        return (
            <div className={this.state.demo}>
            <div id="ip-container" className={this.state.container}>
                <header className="ip-header">
                    <h1 className="ip-logo">
                        <svg className="ip-inner" width="100%" height="100%" viewBox="0 0 300 160" preserveAspectRatio="xMidYMin meet" aria-labelledby="logo_title">
                            <title id="logo_title">Delightful Demonstrations by Codrops</title>

                        </svg>
                    </h1>
                    <div className="ip-loader">
                        <svg className="ip-inner" width="60px" height="60px" viewBox="0 0 80 80">
                            <path className="ip-loader-circlebg" d="M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z"/>
                            <path ref="ipLoaderCircle" className="ip-loader-circle" d="M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z"/>
                        </svg>
                    </div>
                </header>
                <div className="ip-main">
                    <nav className="codrops-demos">
                        <a className="current-demo" href="index.html">Demo 1</a>
                        <a href="index2.html">Demo 2</a>
                    </nav>
                    <h2>Make yourself at home.</h2>
                    <div className="browser clearfix">
                        <div className="box">
                            <span className="icon-bell"></span>
                            <p>Do Re Mi What Fa Si Ti Doi Nemo Do Re Mi What Fa Si Ti Doi Nemo</p>
                        </div>
                        <div className="box">
                            <span className="icon-heart"></span>
                            <p>E La Yo Na Ti Do Pa Pa Noah Do Re Mi What Fa Si Ti Doi Nemo</p>
                        </div>
                        <div className="box">
                            <span className="icon-cog"></span>
                            <p>No way! Hey Hey, me ok! Do Re Mi What Fa Si Ti Doi Nemo</p>
                        </div>
                    </div>
                </div>
            </div>
            </div>
        );
    },
});

2.Loadier的Loading時的效果
建立一個StartLoading函數，當componentDidMount時調用

_startLoading() {
    var circle = React.findDOMNode(this.refs.ipLoaderCircle);
    var progress = 0;
    let self = this;
    circle.style.strokeDasharray = circle.style.strokeDashoffset = circle.getTotalLength();
    var interval = setInterval(function(){
                        progress = Math.min( progress + Math.random() * 0.1, 1 );
                        circle.style.strokeDashoffset = circle.getTotalLength() * ( 1 - progress );
                        if ( progress === 1 ) {
                            clearInterval( interval );
                            self._changClass();
                        };
                }, 80);
},

3.Loader完成後Loaded
建立另一個函數changClass，當progress === 1調用

_changClass() {
    this.setState({
        demo : "layout-switch",
        container : "ip-container loaded"
    });
    console.log("ok");
}

總結

使用React實現並不複雜，只要思路清晰，可是若是要將其組件化而且真正的用到項目中就考慮到不少的因素，單純的實現是不行的，應爲沒有使用Inline Style因此不少工做都仍是在CSS中去實現的，詳細的查看CSS文件你將會學獲得更多，附一張CSS實現手稿