react-magic, 用于响应组件的魔术动画集合

分享于 

5分钟阅读

GitHub

  繁體 雙語
A collection of magic animations for react components.
  • 源代码名称:react-magic
  • 源代码网址:http://www.github.com/lit-forest/react-magic
  • react-magic源代码文档
  • react-magic源代码下载
  • Git URL:
    git://www.github.com/lit-forest/react-magic.git
    Git Clone代码到本地:
    git clone http://www.github.com/lit-forest/react-magic
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/lit-forest/react-magic
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    魔法

    npm versionreactreactreact

    用于响应组件的魔术动画集合。 尽管React提供了一种实现任意动画的方法,但这并不是一项简单的任务,即使。 那就是魔术包出现的地方。 它支持 inline 风格与 aphrodite的工作。 大多数动画都是基于魔术实现的。

    在线演示

    在Github网页页面上有一个演示,用于响应魔术

    安装

    通过 npm 实现了魔法:

    
    npm install --save react-magic 
    
    
    
    

    用法

    你可以直接从主软件包导入每个动画

    import { swap } from'react-magic'

    或者你可以直接导入特定动画

    importswapfrom'react-magic/lib/magic/swap'

    的用法。

    importReact, { Component, PropTypes } from'react';import { StyleSheet, css } from'aphrodite';import { swap } from'react-magic';conststyles=StyleSheet.create({
     magic: {
     animationName: swap,
     animationDuration:'1s' }
    });classAppextendsComponent {
     render() {
     return (
     <div><div className={css(styles.magic)}><h2>react-magic</h2></div></div> );
     }
    }exportdefaultApp; 

    动画

    
    .
    
    
    ├── magic
    
    
    │ |── magic 
    
    
    │ |── twisterInDown 
    
    
    │ |── twisterInUp 
    
    
    │ └── swap 
    
    
    ├── bling 
    
    
    │ |── puffIn 
    
    
    │ |── puffOut 
    
    
    │ |── vanishIn 
    
    
    │ └── vanishOut 
    
    
    ├── staticEffects 
    
    
    │ |── openDownLeft 
    
    
    │ |── openDownLeftReturn 
    
    
    │ |── openDownRight 
    
    
    │ |── openDownRightReturn 
    
    
    │ |── openUpLeft 
    
    
    │ |── openUpLeftReturn 
    
    
    │ |── openUpRight 
    
    
    │ └── openUpRightReturn 
    
    
    ├── staticEffectsOut 
    
    
    │ |── openDownLeftOut 
    
    
    │ |── openDownRightOut 
    
    
    │ |── openUpLeftOut 
    
    
    │ └── openUpRightOut 
    
    
    ├── perspective 
    
    
    │ |── perspectiveDown 
    
    
    │ |── perspectiveDownReturn 
    
    
    │ |── perspectiveLeft 
    
    
    │ |── perspectiveLeftReturn 
    
    
    │ |── perspectiveRight 
    
    
    │ |── perspectiveRightReturn 
    
    
    │ |── perspectiveUp 
    
    
    │ └── perspectiveUpReturn 
    
    
    ├── rotate 
    
    
    │ |── rotateDownIn 
    
    
    │ |── rotateDownOut 
    
    
    │ |── rotateLeftIn 
    
    
    │ |── rotateLeftOut 
    
    
    │ |── rotateRightIn 
    
    
    │ |── rotateRightOut 
    
    
    │ |── rotateUpIn 
    
    
    │ └── rotateUpOut 
    
    
    ├── slide 
    
    
    │ |── slideDown 
    
    
    │ |── slideDownReturn 
    
    
    │ |── slideLeft 
    
    
    │ |── slideLeftReturn 
    
    
    │ |── slideRight 
    
    
    │ |── slideRightReturn 
    
    
    │ |── slideUp 
    
    
    │ └── slideUpReturn 
    
    
    ├── math 
    
    
    │ |── foolishIn 
    
    
    │ |── foolishOut 
    
    
    │ |── holeIn 
    
    
    │ |── holeOut 
    
    
    │ |── swashIn 
    
    
    │ └── swashOut 
    
    
    ├── tin 
    
    
    │ |── tinDownIn 
    
    
    │ |── tinDownOut 
    
    
    │ |── tinLeftIn 
    
    
    │ |── tinLeftOut 
    
    
    │ |── tinRightIn 
    
    
    │ |── tinRightOut 
    
    
    │ |── tinUpIn 
    
    
    │ └── tinUpOut 
    
    
    ├── bomb
    
    
    │ |── bombLeftOut 
    
    
    │ └── bombRightOut 
    
    
    ├── boing
    
    
    │ |── boingInUp 
    
    
    │ └── boingOutDown 
    
    
    ├── space 
    
    
    │ |── spaceInDown 
    
    
    │ |── spaceInLeft 
    
    
    │ |── spaceInRight 
    
    
    │ |── spaceInUp 
    
    
    │ |── spaceOutDown 
    
    
    │ |── spaceOutLeft 
    
    
    │ |── spaceOutRight 
    
    
    │ └── spaceOutUp 
    
    
    
    

    许可证

    MIT


    COM  COL  react  Collect  component  collection  
    相关文章