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;