Diferencia entre revisiones de «Animación con react-animations»

De enunpimpam
Saltar a: navegación, buscar
Línea 1: Línea 1:
 
instalar https://www.npmjs.com/package/react-animations y radium
 
instalar https://www.npmjs.com/package/react-animations y radium
 
  npm install radium react-animations
 
  npm install radium react-animations
 +
 +
animation
 +
 +
https://github.com/FormidableLabs/react-animations
 +
 +
radium
 +
 +
https://github.com/FormidableLabs/radium
 +
 
<syntaxhighlight lang="jsx">
 
<syntaxhighlight lang="jsx">
 
import React from 'react';
 
import React from 'react';

Revisión del 14:58 21 ago 2020

instalar https://www.npmjs.com/package/react-animations y radium

npm install radium react-animations

animation

https://github.com/FormidableLabs/react-animations

radium

https://github.com/FormidableLabs/radium

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

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

class App extends React.Component {
  render() {
    return (

      <StyleRoot>
        <div className="test" >
          <div className="App">
            <header className="App-header">
              <h1 style={styles.bounce}>Quitado</h1>
            </header>
          </div>
        </div>
      </StyleRoot>
    );
  }
}
export default App;