Diferencia entre revisiones de «Animación con react-animations»
De enunpimpam
(No se muestra una edición intermedia del mismo usuario) | |||
Línea 1: | Línea 1: | ||
+ | [[Categoría:React]] | ||
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 actual del 21:32 24 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;