react-animations

? A collection of animations for inline style libraries

Github星跟蹤圖

Maintenance Status

react-animations

A collection of animations that can be used with any inline style library that supports using objects to define keyframe animations, such as Radium or Aphrodite. React-animations implements all animations from animate.css.

Check out the interactive demo.

Explore component collection.

Usage

You can import each animation directly from the main package

import { fadeIn } from 'react-animations'

or you can import a specific animation directly

import fadeIn from 'react-animations/lib/fade-in'

Usage with Radium

import React from 'react';
import { bounce } from 'react-animations';
import Radium, {StyleRoot} from 'radium';

const styles = {
  bounce: {
    animation: 'x 1s',
    animationName: Radium.keyframes(bounce, 'bounce')
  }
}

class Test extends React.Component {
  render() {
    <StyleRoot>
      <div className="test" style={styles.bounce}>
      </div>
    </StyleRoot>
  }
}

Usage with Aphrodite

import { bounce } from 'react-animations';
import { StyleSheet, css } from 'aphrodite';

const styles = StyleSheet.create({
  bounce: {
    animationName: bounce,
    animationDuration: '1s'
  }
})

Usage with JSS

import { bounce } from 'react-animations';
import jss from 'jss'
import preset from 'jss-preset-default'

jss.setup(preset())

const {classes} = jss.createStyleSheet({
  '@keyframes bounce': bounce,
  bounce: {
    animationName: 'bounce',
    animationDuration: '1s',
  },
}).attach()

Usage with styled-components

import styled, { keyframes } from 'styled-components';
import { bounce } from 'react-animations';

const bounceAnimation = keyframes`${bounce}`;

const BouncyDiv = styled.div`
  animation: 1s ${bounceAnimation};
`;

Usage with fela-js

import React from 'react';
import { render } from 'react-dom';
import { createRenderer } from 'fela';
import { createComponent, Provider } from 'react-fela';
import { bounce } from 'react-animations';

const mapStylesToProps = ({ background, height, width }, renderer) => ({
	animationName: renderer.renderKeyframe(() => bounce, {}),
	animationDuration: '2s',
	background,
	height,
	width,
});

const BouncingDiv = createComponent(mapStylesToProps, 'div');

render(
	<Provider renderer={createRenderer()}>
		<BouncingDiv background="red" height="100px" width="100px" />
	</Provider>,
	document.getElementById('root'),
);

Animations

Below is a list of all available animations

bounceOut

bounce

bounceIn

bounceInDown

bounceInLeft

bounceInRight

bounceInUp

bounceOutDown

bounceOutLeft

bounceOutRight

bounceOutUp

fadeIn

fadeInDown

fadeInDownBig

fadeInLeft

fadeInLeftBig

fadeInRight

fadeInRightBig

fadeInUp

fadeInUpBig

fadeOut

fadeOutDown

fadeOutDownBig

fadeOutLeft

fadeOutLeftBig

fadeOutRight

fadeOutRightBig

fadeOutUp

fadeOutUpBig

flash

flip

flipInX

flipInY

flipOutX

flipOutY

headShake

hinge

jello

lightSpeedIn

lightSpeedOut

pulse

rollIn

rollOut

rotateIn

rotateInDownLeft

rotateInDownRight

rotateInUpLeft

rotateInUpRight

rotateOut

rotateOutDownLeft

rotateOutDownRight

rotateOutUpLeft

rotateOutUpRight

rubberBand

shake

slideInDown

slideInLeft

slideInRight

slideInUp

slideOutDown

slideOutLeft

slideOutRight

slideOutUp

swing

tada

wobble

zoomIn

zoomInDown

zoomInLeft

zoomInRight

zoomInUp

zoomOut

zoomOutDown

zoomOutLeft

zoomOutRight

zoomOutUp

Merge

react-animations also exports a merge function that takes two animations and returns a new animation that combines the transforms from both. This is experimental and wont work (well) with animations that have conflicting transforms, such as fadeIn and fadeOut. The merged animation can be used just like any of the imported animations.


import { merge, tada, flip } from 'react-animations';
const tadaFlip = merge(tada, flip);

Maintenance Status

Stable: Formidable is not planning to develop any new features for this project. We are still responding to bug reports and security concerns. We are still welcoming PRs for this project, but PRs that include new features should be small and easy to integrate and should not include breaking changes.

主要指標

概覽
名稱與所有者FormidableLabs/react-animations
主編程語言JavaScript
編程語言JavaScript (語言數: 2)
平台
許可證MIT License
所有者活动
創建於2016-09-19 23:21:24
推送於2022-08-19 13:22:42
最后一次提交2022-08-19 08:21:28
發布數3
最新版本名稱v1.0.0 (發布於 2017-10-30 17:48:41)
第一版名稱v0.0.2 (發布於 2016-09-25 21:10:04)
用户参与
星數3.1k
關注者數71
派生數159
提交數152
已啟用問題?
問題數28
打開的問題數9
拉請求數12
打開的拉請求數3
關閉的拉請求數1
项目设置
已啟用Wiki?
已存檔?
是復刻?
已鎖定?
是鏡像?
是私有?