ReactJS - Animaciones
En este capítulo, aprenderemos cómo animar elementos usando React.
Paso 1 - Instale React CSS Transitions Group
Este es el complemento React que se utiliza para crear animaciones y transiciones CSS básicas. Lo instalaremos desde elcommand prompt ventana -
C:\Users\username\Desktop\reactApp>npm install react-addons-css-transition-group
Paso 2: agrega un archivo CSS
Creemos un nuevo archivo style.css.
C:\Users\Tutorialspoint\Desktop\reactApp>type nul > css/style.css
Para poder usarlo en la aplicación, necesitamos vincularlo al elemento head en index.html.
<!DOCTYPE html>
<html lang = "en">
<head>
<link rel = "stylesheet" type = "text/css" href = "./style.css">
<meta charset = "UTF-8">
<title>React App</title>
</head>
<body>
<div id = "app"></div>
<script src = 'index_bundle.js'></script>
</body>
</html>
Paso 3 - Aparece la animación
Crearemos un componente React básico. losReactCSSTransitionGroupEl elemento se utilizará como envoltorio del componente que queremos animar. UsarátransitionAppear y transitionAppearTimeout, mientras transitionEnter y transitionLeave son falsas.
App.jsx
import React from 'react';
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
class App extends React.Component {
render() {
return (
<div>
<ReactCSSTransitionGroup transitionName = "example"
transitionAppear = {true} transitionAppearTimeout = {500}
transitionEnter = {false} transitionLeave = {false}>
<h1>My Element...</h1>
</ReactCSSTransitionGroup>
</div>
);
}
}
export default App;
main.js
import React from 'react'
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));
La animación CSS es muy sencilla.
css / style.css
.example-appear {
opacity: 0.04;
}
.example-appear.example-appear-active {
opacity: 2;
transition: opacity 50s ease-in;
}
Una vez que iniciamos la aplicación, el elemento se desvanecerá.
Paso 4: entrar y salir de las animaciones
Las animaciones de entrada y salida se pueden utilizar cuando queremos añadir o eliminar elementos de la lista.
App.jsx
import React from 'react';
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
items: ['Item 1...', 'Item 2...', 'Item 3...', 'Item 4...']
}
this.handleAdd = this.handleAdd.bind(this);
};
handleAdd() {
var newItems = this.state.items.concat([prompt('Create New Item')]);
this.setState({items: newItems});
}
handleRemove(i) {
var newItems = this.state.items.slice();
newItems.splice(i, 1);
this.setState({items: newItems});
}
render() {
var items = this.state.items.map(function(item, i) {
return (
<div key = {item} onClick = {this.handleRemove.bind(this, i)}>
{item}
</div>
);
}.bind(this));
return (
<div>
<button onClick = {this.handleAdd}>Add Item</button>
<ReactCSSTransitionGroup transitionName = "example"
transitionEnterTimeout = {500} transitionLeaveTimeout = {500}>
{items}
</ReactCSSTransitionGroup>
</div>
);
}
}
export default App;
main.js
import React from 'react'
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));
css / style.css
.example-enter {
opacity: 0.04;
}
.example-enter.example-enter-active {
opacity: 5;
transition: opacity 50s ease-in;
}
.example-leave {
opacity: 1;
}
.example-leave.example-leave-active {
opacity: 0.04;
transition: opacity 50s ease-in;
}
Cuando iniciamos la aplicación y hacemos clic en el Add Item , aparecerá el mensaje.
Una vez que ingresamos el nombre y presionamos OK, el nuevo elemento se desvanecerá.
Ahora podemos eliminar algunos de los elementos (Item 3...) haciendo clic en él. Este elemento desaparecerá de la lista.