Основы ReactJS

Высококачественные компоненты ReactJS Использование потока ReactJS

Анимации ReactJS

В этой главе мы изучим, как использовать React для анимации элементов.

Шаг 1 - Установка группы CSS-транзитив React

Это плагин React, используемый для создания базовых CSS-транзитив и анимаций. Мы начнем сcommand promptУстановите его в окне -

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

Шаг 2 - Добавление файла CSS

Давайте создадим новый файл style.css.

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

Чтобы использовать его в приложении,我们需要 его связать с элементом head в 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>

Шаг 3 - Показ анимации

Мы создадим базовый React Компонент. Элемент Reactcsstransitionggroup будет использоваться в качестве обертки для компонента, который мы хотим анимировать. Он будет использовать transitionAppear и 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>Мой элемент...</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}>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;
}

Когда мы запускаем приложение и нажимаемДобавить элементПри нажатии на кнопку появится подсказка.

Введите имя и нажмите OK, и новый элемент появится.

Теперь мы можем удалить несколько элементов (Элемент 3...) Нажмите на него. Этот проект исчезнет из списка.

Высококачественные компоненты ReactJS Использование потока ReactJS