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实现手稿
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。