ReactJS Basic Tutorial

Componentes de alto orden de ReactJS Uso de flujo en ReactJS

Animaciones de ReactJS

In this chapter, we will learn how to animate elements with React.

Chapter1Step-Install the React CSS Transitions group

This is the React plugin for creating basic CSS transitions and animations. We will start fromcommand promptInstall it via the window-

C:\Users\username\Desktop\reactApp>npm install react-addons-css-transition-group

Chapter2Step-Add CSS file

Let's create a new file style.css.

C:\Users\w3codebox\Desktop\reactApp>type nul > css/style.css

To be able to use it in the application, we need to link it to the head element in 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>

Chapter3Step-Display animation

We will create a basic React Component. The Reactcsstransitionggroup element will be used as a wrapper for the component we want to animate. It will use transitionAppear and transitionappmentmeout，mientras que transitionEnter y transitionLeave son false.

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>Mi Elemento...</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'));

Las animaciones CSS son muy sencillas.

css / style.css

.example-appear {
　　　opacity:　0.04;
}
.example-appear.example-appear-active　{
　　　opacity:　2;
　　　transition:　opacity　50s　ease-in;
}

Una vez iniciada la aplicación, el elemento se desvanecerá gradualmente.

Pasos4-Animaciones de entrada y salida

Cuando deseamos añadir o eliminar elementos de una lista, podemos usar animaciones de entrada y salida.

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}>Agregar elemento</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;
}

Al iniciar la aplicación y hacer clic enAgregar elementoal hacer clic en el botón, aparecerá un mensaje.

Ingrese el nombre y presione OK para que el nuevo elemento aparezca.

Ahora, podemos eliminar algunos elementos (Elemento 3...)Haga clic en él. Este proyecto se desvanecerá de la lista.

Componentes de alto orden de ReactJS Uso de flujo en ReactJS