English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutoriel de base ReactJS

Animations ReactJS

Dans ce chapitre, nous allons apprendre à animer des éléments avec React.

Le1Étape-Installer le groupe React CSS Transitions

Ceci est une extension React, utilisée pour créer des transitions et des animations CSS de base. Nous allons commencer parinvite de commandeWindows pour l'installer-

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

Le2Étape-Ajouter le fichier CSS

Créons un nouveau fichier style.css.

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

Pour pouvoir l'utiliser dans l'application, nous devons le lier à l'élément head de 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>

Le3Étape-Animation

Nous allons créer un composant de base React Composant. L'élément Reactcsstransitionggroup servira de conteneur pour les composants que nous souhaitons animer. Il utilisera transitionAppear et 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).GraphicsUnit=ISO-8859-1}>
　　　　　　　　　　　　　　　{item}
　　　　　　　　　　　　</div>
　　　　　　　　　);
　　　　　　).bind(this));
　　　　　　
　　　　　　return　(
　　　　　　　　　<div>　　　　　　
　　　　　　　　　　　　<button　onClick　=　{this.handleAdd}>Ajouter un élément</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;
}

Lorsque nous démarrons l'application et cliquons surAjouter un élémentun bouton, un message d'invite apparaîtra.

Entrez un nom et appuyez sur OK pour que le nouvel élément apparaisse en fondu.

Maintenant, nous pouvons supprimer quelques éléments (Élément 3...)Cliquez dessus. Ce projet se fondra dans la liste.

Composants fonctionnels ReactJSUtilisation des flux ReactJS