62

GitHub - bluebill1049/react-simple-animate: ? React UI animation made easy

 5 years ago
source link: https://github.com/bluebill1049/react-simple-animate
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

README.md

React Simple Animate Logo - UI Animation Made Simple

React Simple Animate

Tweet CircleCI Coverage Status npm downloads npm npm

  • Animation from style A to B
  • CSS keyframes animation
  • Chain up animation sequences
  • Tiny size without other dependency

Install

$ npm install react-simple-animate

Docs

Quickstart

import react from 'react';
import { Animate, AnimateKeyframes, AnimateGroup } from 'react-simple-animate';

const props = {
  startStyle: { opacity: 0 }
  endStyle: { opacity: 1 }
};

export default () => {
  return (
    // This example demonstrate animate individual element.
    <Animate play {...props}>
      <h1>React simple animate</h1>
    </Animate>

    // This example demonstrate animate keyframes with individual element.
    <AnimateKeyframes play iterationCount="infinite" keyframes={['opacity: 0', 'opacity: 1']}>
      <h1>React simple animate with keyframes</h1>
    </Animate>

    // This example demonstrate animate group of animation with sequenceIndex.
    <AnimateGroup play>
      <Animate {...props} sequenceIndex={0} />
      <p>Next animation below: </p>
      <Animate {...props} sequenceIndex={1} />
      <p>Final animation below: </p>
      <Animate {...props} sequenceIndex={2} />
    </AnimateGroup>
  );
};

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK