使用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,40.5S57.351,40.5,71 S10,57.351,40.5S23.649,10z"/>
                            <path ref="ipLoaderCircle" className="ip-loader-circle" d="M40,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实现手稿