fokus-lop Jun 20 2019 at 18:04

5 отличных способов анимировать React-приложения в 2019 году

9 min

24K

Skillbox corporate blogWebsite development*Programming*Studying in IT

Translation

+15

Comments 14

AxisPod Jun 20 2019 at 18:15

Самый первый пример мне многое сказал о качестве статьи.

Moxa Jun 20 2019 at 18:29

а что не так с первым примером?

kahi4 Jun 20 2019 at 18:31

Настолько не-реакт-вей ещё поискать нужно, конечно.

Moxa Jun 20 2019 at 18:34

не реакт-вей там только classList.toggle, допустим вместо него есть локальный стейт компонента, относительно которого в рендере ставится нужный css-класс

kahi4 Jun 20 2019 at 18:37

Ну раз мы и говорим про анимации в реакте, наверное и нужно делать как принято в реакте, с стейтом, да ключем в render? Да и конкретно в данном примере document.getElementById выглядит чужеродно, в крайнем случае есть refs

Koneru Jun 20 2019 at 19:00

Я думаю AxisPod намекал на ref и на state, если не так, то я про это говорю. Оба подхода работают, но предложенный вариант хуже работает с жизненным циклом компонента.

vanxant Jun 20 2019 at 21:36

Ну кроме jquery-way ещё то, что там нет собственно анимаций, а есть только переходы (transition).

Moxa Jun 20 2019 at 21:54

что мешает повесить keyframes анимацию на класс?

vanxant Jun 20 2019 at 22:29

Вот и я не знаю, что мешало повесить именно анимацию, а не унылый транзишен на margin :) Да хотя бы и из того же animate.css, раз он вызвал такой вау-эффект у автора.

kahi4 Jun 20 2019 at 18:35

Второй пример тоже никто ни разу не запускал. Был бы отличным примером, почему нельзя индекс из итератора как ключ (key) использовать (потому что при удалении из середины анимация проигрываться не будет), а ещё забыли метод handleDelete,

kahi4 Jun 20 2019 at 19:23

И данный пример устарел, покуда АПИ библиотеки значительно поменялось.

faiwer Jun 20 2019 at 20:42

handleClick() {
    const wrapper = document.getElementById('wrapper');
    wrapper.classList.toggle('is-nav-open')
}

o_O. Как это попало на главную? Зачем эта статья здесь, да ещё и с таким клик-бейт заголовком. Дальше можно даже не читать. Кажется автор видел React только на картинках через подзорную трубу.

alex_blank Jun 21 2019 at 06:10

> добавляя теги в HTML-классы

WTF am I reading?

mayorovp Jun 21 2019 at 14:30

const wrapper = document.getElementById('wrapper');

Никогда не пишите вот так в Реакте! тут проблема даже не в нарушении какого-то там react-way, тут нарушается сам принцип выделения компонентов! Каждый компонент должен быть переиспользуемым и разумно изолированным. Здесь же не наблюдается ни того, ни другого...

Если уж так нужно "поиграть" с элементами DOM — используйте предназначенные для этого инструменты! Неужели так сложно было написать вот так?

const wrapper = ReactDOM.findDOMNode(this);

Или так?

const wrapper = this.wrapperRef.current;