React JS — анимация

От автора: в этой главе мы узнаем, как делается в React js анимация.

Шаг 1 — Установите React CSS Transitions Group

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

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

Шаг 2 — Добавьте файл CSS

Давайте создадим новую папку css и в ней файл style.css. Чтобы иметь возможность использовать его в приложении, нам нужно привязать его в элементе head в index.html.

<link rel = "stylesheet" type = "text/css" href = "css/style.css">

Шаг 3 — Анимация

Мы создадим базовый компонент React. Элемент ReactCSSTransitionGroup будет использоваться как оболочка компонента, который мы хотим анимировать. Он будет использовать transitionAppear и transitionAppearTimeout, а для 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;
[JS] <p>main.js</p> [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.01;
}
.example-appear.example-appear-active { opacity: 1; transition: opacity 500ms 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.01;
}
.example-enter.example-enter-active { opacity: 1; transition: opacity 500ms ease-in;
}
.example-leave { opacity: 1;
}
.example-leave.example-leave-active { opacity: 0.01; transition: opacity 500ms ease-in;
}

Когда мы запустим приложение и нажмем кнопку «Add Item», появится форма.