帮酷LOGO
  • 显示原文与译文双语对照的内容
Super easy magic-move transitions for React apps

  • 源代码名称:react-overdrive
  • 源代码网址:http://www.github.com/berzniz/react-overdrive
  • react-overdrive源代码文档
  • react-overdrive源代码下载
  • Git URL:
    git://www.github.com/berzniz/react-overdrive.git
  • Git Clone代码到本地:
    git clone http://www.github.com/berzniz/react-overdrive
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/berzniz/react-overdrive
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • 超速反应

    超级轻松的魔术移动转换。

    演示

    Overdrive Demo

    Overdrive Demo

    • 带反应路由器的

    Overdrive Demo

    安装

    $ npm install react-overdrive --save

    用法

    带路由的示例

    将任何元素( 不只是图像) 包装在 <Overdrive id=""></Overdrive> 组件。添加相同的id 以在元素之间创建转换。

    page1.js 上:

    importOverdrivefrom'react-overdrive'constpageA= (props) => (
     <div><h1>Page A</h1><Overdrive id="bender-to-big-fry"><img src="bender.png" width="100" height="100"/></Overdrive></div>);

    page2.js 上:

    importOverdrivefrom'react-overdrive'constpageB= (props) => (
     <div><h1>Page B</h1><Overdrive id="bender-to-big-fry"><img src="fry.png" width="300" height="300"/></Overdrive></div>);

    现在在页面之间传送。

    没有路由的示例

    page.js 上:

    importOverdrivefrom'react-overdrive'constpage= (props) => (
     <div> {props.loading&&<Overdrive id="content"><Loader/></Overdrive>}
     {!props.loading&&<Overdrive id="content"><Content/></Overdrive>}
     </div>);

    API

    Prop描述默认值
    id必需。用于标识组件的唯一字符串。
    元素包装元素类型。'div'
    工期动画持续时间( 以毫秒为单位) 。200
    缓动动画缓动函数。''''
    animationDelay计算已经安装构件位置的延迟。 设置为 1 通常有助于避免窗口滚动问题。
    onAnimationEnd动画完成时调度的事件。

    :它是如何工作的

    当卸载 <Overdrive id="example"/> 组件并安装另一个 <Overdrive id="example"/> ( 而非 100毫秒后) 时,将进行转换。

    通过克隆已经卸载的组件和已经装载的组件,将它们添加到从源位置转换的absolute 位置和 CSS 。

    赞助商

    感谢以下公司慷慨提供他们的服务/产品来帮助改进这里项目:

    感谢 BrowserStack 提供 跨浏览器 测试。

    是谁做的?

    请在 Twitter 上找到我,作为 @ketacode 。




    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语