Diferencia entre revisiones de «Animación con react-animations»

De enunpimpam
Saltar a: navegación, buscar
(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;