神刀安全网

react-keyframes: React component for creating frame-based animations

React Keyframes

A React component for creating frame-based animations.

react-keyframes: React component for creating frame-based animations

Example

The following example will render contents in Frame one at a time every 500 ms.

import { render } from 'react-dom'; import { KeyFrames, Frame } from 'react-keyframes';  render(   <Keyframes>     <Frame duration={500}>This</Frame>     <Frame duration={500}>This is</Frame>     <Frame duration={500}>This is <em>animated</em>.</Frame>   </Keyframes>,   document.getElementById('container') );

Documentation

Installation

$ npm install react-keyframes --save

API

KeyFrames

&lt;KeyFrames { component = ‘span’, delay = 0, onStart, onEnd } /&gt;

  • Use import { KeyFrames } from 'react-keyframes' or require('react-keyframes').KeyFrames .
  • The component prop specifies what component KeyFrames renders as.
  • The delay prop specifies when the animation should start (millisecond).
  • The onStart function is invoked upon animation start
  • The onEnd function is invoked upon animation end
  • Any additional, user-defined properties will become properties of the rendered component.
  • It must have only Frame as children.
  • Example:

    import { Component } from 'react'; import { Keyframes, Frame } from 'react-keyframes';  class extends Component {   render () {     return <KeyFrames component="pre" delay={300} className="animation-test">       <Frame>foo</Frame>       <Frame>bar</Frame>     </KeyFrames>;   } }

Frame

&lt;Frame { duration = 0 } /&gt;

  • Use import { Frame } from 'react-keyframes' or require('react-keyframes').Frame .
  • The duration prop specifies the length of time that a frame should show (millisecond).
  • You have to put Frame in the order you want them animated.
  • Example:

    import { Component } from 'react'; import { Keyframes, Frame } from 'react-keyframes';  class extends Component {   render () {     return <KeyFrames>       <Frame duration={100}>foo</Frame>       <Frame duration={200}>bar</Frame>     </KeyFrames>;   } }

Contributing

  • Run gulp help to see available tasks.
  • Before submitting a PR, please run gulp lint and npm test .
  • We use standard + semicolons.
  • Please be welcoming .

Credits

  • Copyright © 2016 Zeit, Inc and project authors.
  • Licensed under MIT.

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » react-keyframes: React component for creating frame-based animations

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮