0 added
0 removed
Original
2026-01-01
Modified
2026-03-10
1
<p>Теги: css, javascript, фреймворк, reactjs, анимация, react-reveal</p>
1
<p>Теги: css, javascript, фреймворк, reactjs, анимация, react-reveal</p>
2
<p>Существуют разные способы создания анимации в приложении ReactJS. Зачастую разработчики используют только возможности CSS, добавляя классы в HTML-теги. Это хороший метод, но есть и другие. Один из них - React Reveal.</p>
2
<p>Существуют разные способы создания анимации в приложении ReactJS. Зачастую разработчики используют только возможности CSS, добавляя классы в HTML-теги. Это хороший метод, но есть и другие. Один из них - React Reveal.</p>
3
<p>React Reveal представляет собой<strong>анимационный фреймворк для React</strong>. В этом фреймворке есть как основные простые анимации (отражение, масштабирование, постепенное исчезновение, вращение), так и более сложные анимации.</p>
3
<p>React Reveal представляет собой<strong>анимационный фреймворк для React</strong>. В этом фреймворке есть как основные простые анимации (отражение, масштабирование, постепенное исчезновение, вращение), так и более сложные анимации.</p>
4
<p>Фреймворк позволяет<a>управлять анимациями посредством<strong>props</strong></a>. К примеру, вы сможете это делать, задавая дополнительные настройки: задержку, расстояние, положение, каскад и т. п. Кроме того, допускается использование кастомных CSS-эффектов, серверного рендеринга, компонентов высокого порядка. А если вы ещё и любите анимацию прокрутки, то React Reveal вам точно подойдёт.</p>
4
<p>Фреймворк позволяет<a>управлять анимациями посредством<strong>props</strong></a>. К примеру, вы сможете это делать, задавая дополнительные настройки: задержку, расстояние, положение, каскад и т. п. Кроме того, допускается использование кастомных CSS-эффектов, серверного рендеринга, компонентов высокого порядка. А если вы ещё и любите анимацию прокрутки, то React Reveal вам точно подойдёт.</p>
5
import Fade from 'react-reveal/Fade'; <Fade top> <h1>Title</h1> </Fade><p>Посмотрите на следующую анимацию прокрутки:</p>
5
import Fade from 'react-reveal/Fade'; <Fade top> <h1>Title</h1> </Fade><p>Посмотрите на следующую анимацию прокрутки:</p>
6
<p>Как видите, мы имеем пять блоков, каждый их которых обладает полноэкранной страницей и внутренним заголовком. Вот как это реализуется:</p>
6
<p>Как видите, мы имеем пять блоков, каждый их которых обладает полноэкранной страницей и внутренним заголовком. Вот как это реализуется:</p>
7
import React, { Component, Fragment } from 'react'; import Fade from 'react-reveal/Fade'; const animateList = [1, 2, 3, 4, 5]; export default class ReactReveal extends Component { render() { return ( <Fragment> {animateList.map((item, key) => ( <div style={styles.block} key={key}> <Fade top> <h1 style={styles.title}>{`block ${item}`}</h1> </Fade> </div> ))} </Fragment> ); } } const styles = { block: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%', background: '#000', borderBottom: '1px solid rgba(255,255,255,.2)', }, title: { textAlign: 'center', fontSize: 100, color: '#fff', fontFamily: 'Lato, sans-serif', fontWeight: 100, }, };<p>Здесь мы создаём константу animateList (массив содержит пять элементов). Далее, после применения метода массива map, вы уже сможете рендерить каждый элемент в компонентах Fade и вставлять элементы в заголовок. Стили, которые определены в константе styles, характеризуются короткими CSS-стилями для блока и заголовка. Итого получаем пять блоков с анимацией Fade сверху. Как видите, это совсем несложно.</p>
7
import React, { Component, Fragment } from 'react'; import Fade from 'react-reveal/Fade'; const animateList = [1, 2, 3, 4, 5]; export default class ReactReveal extends Component { render() { return ( <Fragment> {animateList.map((item, key) => ( <div style={styles.block} key={key}> <Fade top> <h1 style={styles.title}>{`block ${item}`}</h1> </Fade> </div> ))} </Fragment> ); } } const styles = { block: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%', background: '#000', borderBottom: '1px solid rgba(255,255,255,.2)', }, title: { textAlign: 'center', fontSize: 100, color: '#fff', fontFamily: 'Lato, sans-serif', fontWeight: 100, }, };<p>Здесь мы создаём константу animateList (массив содержит пять элементов). Далее, после применения метода массива map, вы уже сможете рендерить каждый элемент в компонентах Fade и вставлять элементы в заголовок. Стили, которые определены в константе styles, характеризуются короткими CSS-стилями для блока и заголовка. Итого получаем пять блоков с анимацией Fade сверху. Как видите, это совсем несложно.</p>
8
<p><em>Источник -<a>"5 Ways to animate a React app"</a>.</em></p>
8
<p><em>Источник -<a>"5 Ways to animate a React app"</a>.</em></p>
9
9