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.…»)
 
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;