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.…») |
|||
Línea 6: | Línea 6: | ||
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 23: | ||
<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 30: | ||
} | } | ||
} | } | ||
− | |||
export default App; | export default App; | ||
</syntaxhighlight> | </syntaxhighlight> |
Revisión del 14:48 21 ago 2020
instalar https://www.npmjs.com/package/react-animations y radium
npm install radium react-animations
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;