0 added
0 removed
Original
2026-01-01
Modified
2026-03-10
1
<p>Теги: react, анимация, animations, анимация подпрыгивания</p>
1
<p>Теги: react, анимация, animations, анимация подпрыгивания</p>
2
<p><a>React-animations</a>представляет собой библиотеку, основанную на анимациях из<a>animate.css</a>. Библиотека относительно проста в применении и включает в себя множество анимационных коллекций. Сегодня React-animation поддерживает работу с любой inline style-библиотекой, поддерживающей применение объектов для определения ключевых кадров анимации, таких как Aphrodite, Radium либо styled-components.</p>
2
<p><a>React-animations</a>представляет собой библиотеку, основанную на анимациях из<a>animate.css</a>. Библиотека относительно проста в применении и включает в себя множество анимационных коллекций. Сегодня React-animation поддерживает работу с любой inline style-библиотекой, поддерживающей применение объектов для определения ключевых кадров анимации, таких как Aphrodite, Radium либо styled-components.</p>
3
<p>Посмотреть на анимации можно в gif-файле:</p>
3
<p>Посмотреть на анимации можно в gif-файле:</p>
4
<p>Теперь рассмотрим, как функционирует<strong>анимация подпрыгивания</strong>.</p>
4
<p>Теперь рассмотрим, как функционирует<strong>анимация подпрыгивания</strong>.</p>
5
<p>В первую очередь, импортируем анимацию, выбранную из react-animations.</p>
5
<p>В первую очередь, импортируем анимацию, выбранную из react-animations.</p>
6
const Bounce = styled.div`animation: 2s ${keyframes`${bounce}`} infinite`;<p>После создания компонента обернём любой HTML-код либо компонент для выполнения анимации.</p>
6
const Bounce = styled.div`animation: 2s ${keyframes`${bounce}`} infinite`;<p>После создания компонента обернём любой HTML-код либо компонент для выполнения анимации.</p>
7
<bounce><h1>Hello Animation Bounce</h1></bounce><p>Вот как то может выглядеть:</p>
7
<bounce><h1>Hello Animation Bounce</h1></bounce><p>Вот как то может выглядеть:</p>
8
import React, { Component } from 'react'; import styled, { keyframes } from 'styled-components'; import { bounce } from 'react-animations'; import './style.css'; const Bounce = styled.div`animation: 2s ${keyframes`${bounce}`} infinite`; export default class ReactAnimations extends Component { render() { return ( <Bounce><h1>Hello Animation Bounce</h1></bounce> ); } }<p>Как видите, анимация функционирует, при этом она является довольно простой и, если хотите, базовой.</p>
8
import React, { Component } from 'react'; import styled, { keyframes } from 'styled-components'; import { bounce } from 'react-animations'; import './style.css'; const Bounce = styled.div`animation: 2s ${keyframes`${bounce}`} infinite`; export default class ReactAnimations extends Component { render() { return ( <Bounce><h1>Hello Animation Bounce</h1></bounce> ); } }<p>Как видите, анимация функционирует, при этом она является довольно простой и, если хотите, базовой.</p>
9
<p>На закуску держите неплохое решение для применения этой анимации при прокрутке -<a>react-animate-on-scroll</a>.</p>
9
<p>На закуску держите неплохое решение для применения этой анимации при прокрутке -<a>react-animate-on-scroll</a>.</p>
10
<p><em>Источник -<a>"5 Ways to animate a React app"</a>.</em></p>
10
<p><em>Источник -<a>"5 Ways to animate a React app"</a>.</em></p>
11
11