0 added
0 removed
Original
2026-01-01
Modified
2026-03-10
1
<p>Теги: css, react, анимация</p>
1
<p>Теги: css, react, анимация</p>
2
<p>Использование<strong>CSS</strong>- одни из наилучших способов создания простой анимации в React. Если вы применяете его вместо импорта JavaScript-библиотек, сборка будет небольшой, а браузер затратит меньше ресурсов, что увеличит производительность приложений. Метод вам подойдёт, если анимация простая, а вы беспокоитесь о размерах своей сборки.</p>
2
<p>Использование<strong>CSS</strong>- одни из наилучших способов создания простой анимации в React. Если вы применяете его вместо импорта JavaScript-библиотек, сборка будет небольшой, а браузер затратит меньше ресурсов, что увеличит производительность приложений. Метод вам подойдёт, если анимация простая, а вы беспокоитесь о размерах своей сборки.</p>
3
<p>В качестве примера рассмотрим гамбургер-меню:</p>
3
<p>В качестве примера рассмотрим гамбургер-меню:</p>
4
<p>Это простейшее меню со свойством CSS и триггером className = "is-nav-open" для тега html. Путей реализации здесь много. К примеру, можно создать wrapper над навигацией и вызывать изменения полей. Тут навигация имеет постоянную ширину (250px) и wrapper со свойством margin-left либо translateX с такой же шириной. Когда надо показать навигацию, добавьте className = "is-nav-open" для wrapper и переместите wrapper на margin-left / translateX: 0;</p>
4
<p>Это простейшее меню со свойством CSS и триггером className = "is-nav-open" для тега html. Путей реализации здесь много. К примеру, можно создать wrapper над навигацией и вызывать изменения полей. Тут навигация имеет постоянную ширину (250px) и wrapper со свойством margin-left либо translateX с такой же шириной. Когда надо показать навигацию, добавьте className = "is-nav-open" для wrapper и переместите wrapper на margin-left / translateX: 0;</p>
5
import React, {Component} from 'react'; import {Icon} from 'antd'; import './style.css'; export default class ExampleCss extends Component { constructor(props){ super(props); this.wrapperRef = React.createRef(); } handleClick() { const wrapper = this.wrapperRef.current; wrapper.classList.toggle('is-nav-open') } render() { return ( <div ref={this.wrapperRef} className="wrapper"> <div className="nav"> <icon className="nav__icon" type="menu-fold" onClick={() => this.handleClick()}/> <div className="nav__body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae ducimus est laudantium libero nam optio repellat sit unde voluptatum? </div> </div> </div> ); } }<p>А вот и CSS-стили:</p>
5
import React, {Component} from 'react'; import {Icon} from 'antd'; import './style.css'; export default class ExampleCss extends Component { constructor(props){ super(props); this.wrapperRef = React.createRef(); } handleClick() { const wrapper = this.wrapperRef.current; wrapper.classList.toggle('is-nav-open') } render() { return ( <div ref={this.wrapperRef} className="wrapper"> <div className="nav"> <icon className="nav__icon" type="menu-fold" onClick={() => this.handleClick()}/> <div className="nav__body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae ducimus est laudantium libero nam optio repellat sit unde voluptatum? </div> </div> </div> ); } }<p>А вот и CSS-стили:</p>
6
.wrapper { display: flex; width: 100%; height: 100%; transition: margin .5s; margin: 0 0 0 -250px; } .wrapper.is-nav-open { margin-left: 0; } .nav { position: relative; width: 250px; height: 100%; padding: 20px; border-right: 1px solid #ccc; } .nav__icon { position: absolute; top: 0; right: -60px; padding: 20px; font-size: 20px; cursor: pointer; transition: color .3s; } .nav__icon:hover { color: #5eb2ff; }<p>Вышеописанный метод пригодится в большинстве случаев. Действительно, проще написать несколько CSS-строк и менять className, чем выполнять импорт больших библиотек и использовать их. А самое главное заключается в том, что ваши пользователи останутся вам благодарны за то, что приложение работает в веб-браузере очень быстро.</p>
6
.wrapper { display: flex; width: 100%; height: 100%; transition: margin .5s; margin: 0 0 0 -250px; } .wrapper.is-nav-open { margin-left: 0; } .nav { position: relative; width: 250px; height: 100%; padding: 20px; border-right: 1px solid #ccc; } .nav__icon { position: absolute; top: 0; right: -60px; padding: 20px; font-size: 20px; cursor: pointer; transition: color .3s; } .nav__icon:hover { color: #5eb2ff; }<p>Вышеописанный метод пригодится в большинстве случаев. Действительно, проще написать несколько CSS-строк и менять className, чем выполнять импорт больших библиотек и использовать их. А самое главное заключается в том, что ваши пользователи останутся вам благодарны за то, что приложение работает в веб-браузере очень быстро.</p>
7
<p><em>Источник -<a>"5 Ways to animate a React app"</a>.</em></p>
7
<p><em>Источник -<a>"5 Ways to animate a React app"</a>.</em></p>
8
8