1 added
1 removed
Original
2026-01-01
Modified
2026-03-10
1
<p>Теги: css, react, js, javascript-библиотека, reacttransitiongroup, анимация</p>
1
<p>Теги: css, react, js, javascript-библиотека, reacttransitiongroup, анимация</p>
2
<p>В этой небольшой заметке мы рассмотрим такой компонент, как<a>ReactTransitionGroup</a>. Он был разработан специалистами из сообщества ReactJs и позволяет легко реализовывать базовые CSS-анимации и переходы.</p>
2
<p>В этой небольшой заметке мы рассмотрим такой компонент, как<a>ReactTransitionGroup</a>. Он был разработан специалистами из сообщества ReactJs и позволяет легко реализовывать базовые CSS-анимации и переходы.</p>
3
<p>Сами разработчики описывают данный инструмент, как набор компонентов, специально разработанный для создания анимации и позволяющий управлять состояниями с течением времени.</p>
3
<p>Сами разработчики описывают данный инструмент, как набор компонентов, специально разработанный для создания анимации и позволяющий управлять состояниями с течением времени.</p>
4
<h2>Что нужно знать о ReactTransitionGroup</h2>
4
<h2>Что нужно знать о ReactTransitionGroup</h2>
5
<p>Три вещи, которые вы должны знать об этом компоненте: 1. ReactTransitionGroup меняет классы в случае изменении жизненного цикла компонента. При этом анимированный стиль должен описываться в CSS-классах. 2. ReactTransitionGroup имеет совсем небольшой размер. Его нужно устанавливать в пакете для React-приложения, причём сборка увеличится крайне незначительно. Кроме того, можно применять CDN. 3. ReactTransitionGroup включает 3 компонента: CSSTransition, Transition и TransitionGroup. Для запуска анимации достаточно обернуть компонент в них.</p>
5
<p>Три вещи, которые вы должны знать об этом компоненте: 1. ReactTransitionGroup меняет классы в случае изменении жизненного цикла компонента. При этом анимированный стиль должен описываться в CSS-классах. 2. ReactTransitionGroup имеет совсем небольшой размер. Его нужно устанавливать в пакете для React-приложения, причём сборка увеличится крайне незначительно. Кроме того, можно применять CDN. 3. ReactTransitionGroup включает 3 компонента: CSSTransition, Transition и TransitionGroup. Для запуска анимации достаточно обернуть компонент в них.</p>
6
<p>Давайте рассмотрим, как сделать анимацию по аналогий с той, что на рисунке ниже:</p>
6
<p>Давайте рассмотрим, как сделать анимацию по аналогий с той, что на рисунке ниже:</p>
7
<p>Итак, для начала импортируйте CSSTransitionGroup из react-transition-group. Потом оберните список и установите свойство transitionName. Каждый раз, когда в CSSTransitionGroup будет добавляться или удаляться дочерний элемент, он будет получать стили анимации.</p>
7
<p>Итак, для начала импортируйте CSSTransitionGroup из react-transition-group. Потом оберните список и установите свойство transitionName. Каждый раз, когда в CSSTransitionGroup будет добавляться или удаляться дочерний элемент, он будет получать стили анимации.</p>
8
<CSSTransitionGroup transitionName="example" > {items} </CSSTransitionGroup><p>Обратите внимание, что если установлено свойство transitionName = "example", классы в ваших таблицах стилей должны будут начинаться с имени примера.</p>
8
<CSSTransitionGroup transitionName="example" > {items} </CSSTransitionGroup><p>Обратите внимание, что если установлено свойство transitionName = "example", классы в ваших таблицах стилей должны будут начинаться с имени примера.</p>
9
.example-enter { opacity: 0.01; } .example-enter.example-enter-active { opacity: 1; transition: opacity 300ms ease-in; } .example-leave { opacity: 1; } .example-leave.example-leave-active { opacity: 0.01; transition: opacity 300ms ease-in; }<p>Таким образом, вы сможете увидеть базовое использование компонента ReactTransitionGroup.</p>
9
.example-enter { opacity: 0.01; } .example-enter.example-enter-active { opacity: 1; transition: opacity 300ms ease-in; } .example-leave { opacity: 1; } .example-leave.example-leave-active { opacity: 0.01; transition: opacity 300ms ease-in; }<p>Таким образом, вы сможете увидеть базовое использование компонента ReactTransitionGroup.</p>
10
-
<p>Теперь добавим ��огики. Нужно описать 2 метода для реализации примера списка контактов: 1)<strong>handleAdd</strong>- осуществляет добавление новых контактов, получая случайное имя и помещая его непосредственно в массив state.items. (если имя случайное, используется пакет random-name); 2)<strong>handleRemove</strong>- контакт удаляется по индексу в массиве state.items.</p>
10
+
<p>Теперь добавим логики. Нужно описать 2 метода для реализации примера списка контактов: 1)<strong>handleAdd</strong>- осуществляет добавление новых контактов, получая случайное имя и помещая его непосредственно в массив state.items. (если имя случайное, используется пакет random-name); 2)<strong>handleRemove</strong>- контакт удаляется по индексу в массиве state.items.</p>
11
import React, { Component, Fragment } from 'react'; import { CSSTransitionGroup } from 'react-transition-group' import random from 'random-name' import Button from './button' import Item from './item' import './style.css'; export default class ReactTransitionGroup extends Component { constructor(props) { super(props); this.state = { items: ['Natividad Steen']}; this.handleAdd = this.handleAdd.bind(this); } handleAdd() { let newItems = this.state.items; newItems.push(random()); this.setState({ items: newItems }); } handleRemove(i){ let newItems = this.state.items.slice(); newItems.splice(i,1); this.setState({items: newItems}); } render () { const items = this.state.items.map((item, i) => ( <Item item={item} key={i} keyDelete={i} handleRemove={(i) => this.handleRemove(i)} /> )); return ( <Fragment> <Button onClick={this.handleAdd}/> <div className="project"> <CSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300} > {items} </CSSTransitionGroup> </div> </Fragment> ); } };<p>Источник -<a>"5 Ways to animate a React app"</a>.</p>
11
import React, { Component, Fragment } from 'react'; import { CSSTransitionGroup } from 'react-transition-group' import random from 'random-name' import Button from './button' import Item from './item' import './style.css'; export default class ReactTransitionGroup extends Component { constructor(props) { super(props); this.state = { items: ['Natividad Steen']}; this.handleAdd = this.handleAdd.bind(this); } handleAdd() { let newItems = this.state.items; newItems.push(random()); this.setState({ items: newItems }); } handleRemove(i){ let newItems = this.state.items.slice(); newItems.splice(i,1); this.setState({items: newItems}); } render () { const items = this.state.items.map((item, i) => ( <Item item={item} key={i} keyDelete={i} handleRemove={(i) => this.handleRemove(i)} /> )); return ( <Fragment> <Button onClick={this.handleAdd}/> <div className="project"> <CSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300} > {items} </CSSTransitionGroup> </div> </Fragment> ); } };<p>Источник -<a>"5 Ways to animate a React app"</a>.</p>
12
12