Diferencia entre revisiones de «Animación con react-animations»
De enunpimpam
(Página creada con «instalar https://www.npmjs.com/package/react-animations y radium npm install radium react-animations <syntaxhighlight lang="jsx"> import React from 'react'; import './App.…») |
|||
(No se muestran 2 ediciones intermedias 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'; | ||
Línea 6: | Línea 16: | ||
import { bounce } from 'react-animations'; | import { bounce } from 'react-animations'; | ||
import Radium, { StyleRoot } from 'radium'; | import Radium, { StyleRoot } from 'radium'; | ||
− | |||
− | |||
const styles = { | const styles = { | ||
Línea 25: | Línea 33: | ||
<header className="App-header"> | <header className="App-header"> | ||
<h1 style={styles.bounce}>Quitado</h1> | <h1 style={styles.bounce}>Quitado</h1> | ||
− | |||
</header> | </header> | ||
</div> | </div> | ||
Línea 33: | Línea 40: | ||
} | } | ||
} | } | ||
− | |||
export default App; | export default App; | ||
</syntaxhighlight> | </syntaxhighlight> |
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;