React JS — анимация

Дата публикации: 2018-07-25

React JS — анимация

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

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

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

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

1	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">

1	<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;
<pre class="lang:JS">

<p>main.js</p>

<pre class="lang:JS">
import React from 'react'
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

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;

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

.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;

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 (

{item}

</div>

);

}.bind(this));

return (

<div>

<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'));

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