I use with Radium + react + webpack.Please tell me ,how can I make it compatibility

My company was considering using this for a project, but it won't work for us without a license of some sort, preferably MIT, which should be compatible with Animate.css.

import slideInDown from 'react-animations/lib/slideInDown'
import React, {Component} from 'react'
import { StyleSheet, css } from 'aphrodite';

export default function SlideInDown({duration,component}){
const styles = StyleSheet.create({
slideInDown: {
animationName: slideInDown,
animationDuration: duration || '1s'
}
})
return

Hi,

I am trying to use npm install @types/react-animations so I can get my animation to work but getting the error in the subject.

Use eslint-config-formidable as a baseline for linting, so the project is as consistent as possible with other Formidable projects

I am getting above error. what should I do?

Hi.

Looking to animate a modal window with this. I've gotten fadeIn to work, but not sure how I can get it to fade out as well. I'm using Radium.

I've tried:

container: {
    display: 'block',

    hidden: {
      animationName: Radium.keyframes(fadeIn, 'fadeIn')
    },

    visible: {
      animationName: Radium.keyframes(fadeOut, 'fadeOut')
    }
}

And then in my class:

 <div
   role="dialog"
   style={[
   defaultStyles.container,
   rendered ? defaultStyles.container.visible : defaultStyles.container.hidden
   ]}
 >

But does the fadeIn, then the fadeOut, then fadesIn again. Any ideas?

Please include a simple line explaining how to npm install the package properly. It is not obvious for some programmers, especially for beginners

when the animate is run over, then the element will be back,
for example:

fadeOutDown: {
    animation: 'x 1s',
    animationName: Radium.keyframes(fadeOutDown, 'fadeOutDown'),
  }

when element is fadeOutDown, then is will be show .

if add display: 'none'
animate not work

Any way to delay animations?

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

const styles = StyleSheet.create({
  slideInLeft: {
    animationDelay: '2s',
    animationName: slideInLeft,
    animationDuration: '3s'
  }
});

Adding the animation delay property did not work.

How to trigger an animation on a click event ?
There is no documentation provided for it.

Hi

Thanks for awesome library .
Please have a look on my code given below and tell me if any correction required to do so .Please tell me i am at my office and my boss told me to so and i am in a hurry.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { bounce } from 'react-animations';
import Radium from 'radium';

class App extends Component {
  render() {
    const styles = {
      bounce: {
        animation: 'x 1s',
        animationName: Radium.keyframes(bounce, 'bounce')
      }
    }
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro" style={styles.bounce}>
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

Thanks in advance !

after first fire, animation not repeat when prop changed. how can i do that?

I installed this package for my react project and tried many times, I haven't use animations.css and radium before, so I tried to copy the code sample from README usage. And it doesn't work, although I tried many times.

Finally ,I realize that, it's very important to add </StyleRoot>, if not, the animation won't work.

See this issue #5 .This is the reason why many guys get stuck with it, so I write this to notice other guys and pull a request.

I believe it would be useful to define a default export in the main index file which exports an object containing all of the animations.

export default {
  bounce,
  flash,
  pulse,
  // ...
};

Which can then be imported as

import animations from 'react-animations';

The benefit of this is that you can allow a user/consumer to choose their own animations without having to import them all individually.

For example, I'm currently developing a Notification component that uses react-animations for it's entry and exit animations. I'd like to be able to expose a couple of props that let the consumer pick the animation that the Notification performs on entry and exit.

The simplest way to do this would be as follows.

import animations from 'react-animations';

export const Notification = ({
  enterAnimationName,
  exitAnimationName,
}) => {
  const enterAnimation = animations[enterAnimationName];
  const exitAnimation = animations[exitAnimationName];
  
  // ...
};

Currently, this isn't possible as react-animations has no default export, so the value of animations is just undefined.

Generally speaking, I do think it's rare that someone would want to import all animations, and that it should be advised against if you are just planning on using a single animation. Saying that, I do think that there's utility in this feature.

More than happy to open a PR.

Why is it react-animations, I don't see any dependency to react? It should be "cssinjs-animations" or similar.

See FormidableLabs/eslint-config-formidable#29 (comment) for context

How to set loop infinite? This doesn't seems obvious how to get a infinite loop.

Is there a way to execute a callback function when the animation is complete? I think such a feature would make adding state triggered animations much easier to implement.

how do you fade in from black?

I tried using backgroundColor but it doesn't work

...
import Radium, { StyleRoot } from 'radium';
import { fadeIn } from 'react-animations'
...
const animations = {
  fadein: {
    animation: 'x 3s',
    animationName: Radium.keyframes(fadeIn, 'bounce'),
    backgroundColor: 'black',
  }
}
...
<StyleRoot>
   <img style={animations.fadein as React.CSSProperties} src={background_img} className={style.calltoaction_image} />
</StyleRoot>

Is it possible to reset an animation, and make it play again?

There is no file with the typage when working next to the typescript environment.

Is there an example of usage for the FelaJS library?

Is there a native way to set animations on/before/after component enter/exit?

If not is there a recommended way to use this?

thanks

Everything looks pretty nice with a lot of potential to simplify animations in React which is not easy for newbies like me.

After a couple of hours trying to use this project, I gave up. There is too few documentation for people not familiar with Radium, keyframes, etc.

Current example:

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

Corrected example:

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

$ sign in missing in animationName value.