React Simple Animate

让 React UI 动画变得简单。「🎯 React UI animation made easy」

Github星跟踪图

Tweet CircleCI Coverage Status npm downloads npm npm

Features

  • 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

Components

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

export default () => (
  <>
    {/* animate individual element. */}
    <Animate play start={{ opacity: 0 }} end={{ opacity: 1 }}>
      <h1>React simple animate</h1>
    </Animate>
    
    {/* animate keyframes with individual element. */}
    <AnimateKeyframes
      play
      iterationCount="infinite"
      keyframes={["opacity: 0", "opacity: 1"]}
    >
      <h1>React simple animate with keyframes</h1>
    </AnimateKeyframes>
    
    {/* animate group of animation in sequences */}
    <AnimateGroup play>
      <Animate start={{ opacity: 0 }} end={{ opacity: 1 }} sequenceIndex={0}>
        first
      </Animate>
      <Animate start={{ opacity: 0 }} end={{ opacity: 1 }} sequenceIndex={1}>
        second
      </Animate>
      <Animate start={{ opacity: 0 }} end={{ opacity: 1 }} sequenceIndex={2}>
        third
      </Animate>
    </AnimateGroup>
  </>
);

Hooks

import react from 'react';
import { useAnimate, useAnimateKeyframes, useAnimateGroup } from 'react-simple-animate';

export const useAnimateExample = () => {
  const { style, play } = useAnimate({ start: { opacity: 0 }, end: { opacity: 1 } });
  useEffect(() => play(true), []);
  
  return <div style={style}>useAnimate</div>;
};

export const useAnimateKeyframesExample = () => {
  const { style, play } = useAnimateKeyframes({ 
    keyframes: ['opacity: 0', 'opacity: 1'], 
    iterationCount: 4 
  });
  useEffect(() => play(true), []);
  
  return <div style={style}>useAnimate</div>;
};

export const useAnimateGroup = () => {
  const { styles = [], play } = useAnimateGroup({
    sequences: [
      { start: { opacity: 1 }, end: { opacity: 0 } },
      { start: { background: "red" }, end: { background: "blue" } }
    ]
  });
  useEffect(() => play(true), []);

  return {styles.map(style => <div style={style}>useAnimateGroup</div>)};
};

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]










主要指标

概览
名称与所有者beekai-oss/react-simple-animate
主编程语言TypeScript
编程语言JavaScript (语言数: 2)
平台Linux, Mac, Windows
许可证MIT License
所有者活动
创建于2017-07-29 00:54:19
推送于2024-12-16 10:49:53
最后一次提交2024-12-16 21:48:16
发布数125
最新版本名称v3.5.3 (发布于 2024-12-16 21:48:17)
第一版名称v1.0.1 (发布于 2017-07-30 18:20:11)
用户参与
星数1.8k
关注者数12
派生数61
提交数425
已启用问题?
问题数28
打开的问题数1
拉请求数65
打开的拉请求数2
关闭的拉请求数19
项目设置
已启用Wiki?
已存档?
是复刻?
已锁定?
是镜像?
是私有?