Diferencia entre revisiones de «Animación con react-animations»
De enunpimpam
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;