Tutorial Básico do ReactJS

Componentes de Alto Nível do ReactJS Uso do Fluxo no ReactJS

Animações do ReactJS

Neste capítulo, vamos aprender como usar o React para animar elementos.

O1Passo-Instalar o grupo React CSS Transitions

Este é o plugin React, usado para criar transições CSS básicas e animações. Vamos começarcommand promptInstalar no prompt de comando-

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

O2Passo-Adicionar arquivo CSS

Vamos criar um novo arquivo style.css.

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

Para que possamos usá-lo no aplicativo, precisamos linká-lo ao elemento head no 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>

O3Passo-Mostra animação

Vamos criar um React básico Component. O elemento Reactcsstransitionggroup será usado como encapsulador para o componente que desejamos animar. Ele usará transitionAppear e transitionappmentmeout，而 transitionEnter 和 transitionLeave 为 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>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'));

CSS动画非常简单。

css / style.css

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

一旦启动应用程序，该元素就会淡入。

步骤4-输入及输出动画

当我们要从列表中添加或删除元素时，可以使用输入及输出动画。

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}>Adicionar 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;
}

Quando iniciamos a aplicação e clicamosAdicionar Itemao clicar no botão, aparecerá uma mensagem de aviso.

Insira o nome e pressione OK para que o novo elemento desvança.

Agora, podemos deletar alguns itens(Item 3...)Clique nele. Este projeto desvanecerá da lista.

Componentes de Alto Nível do ReactJS Uso do Fluxo no ReactJS