使用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 (
            

            

                

                    

                        
                    
                    

                        
                    
                
                

                    

                        Demo 1
                        Demo 2
                    
                    
Make yourself at home.
                    

                        

                            
                            
Do Re Mi What Fa Si Ti Doi Nemo Do Re Mi What Fa Si Ti Doi Nemo
                        
                        

                            
                            
E La Yo Na Ti Do Pa Pa Noah Do Re Mi What Fa Si Ti Doi Nemo
                        
                        

                            
                            
No way! Hey Hey, me ok! Do Re Mi What Fa Si Ti Doi Nemo
                        
                    
                
            
            
        );
    },
});

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实现手稿