Пишем анимацию растворения в Wolf Галерее | React + TypeScript

В текущем видео мы напишем анимацию растворения на главной фотографии и добавим смену изображений по клику на превью галерею.
🏰 Английский YouTube: @webelart_en

Ссылки используемые в уроке:

00:00 Введение.
00:31 Разбираем теорию и код реализации.
06:28 Реализация Transition для главной фотографии.
24:24 Устанавливаем переключения на PreviewGallery.

На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.

[АлександрВикторович-тб]

Я не знаю почему, но Ваши видео, мне проще усваивать, чем аналогичные, других авторов. Спасибо, за то что делитесь знаниями. 👍👍👍👍👍

[GeorgiiGalechyan]

Незаслуженно мало просмотров. От меня лайк и подписка.

[sergey_zatsepin]

Ну вообще анимация(переход transition) работает сразу, достаточно просто классы менять с opacity: 0 на opacity: 1 и обратно. Проблема может быть только в возможных накладках ререндеров и transition. У тебя конечно решение, и скорее всего даже оно будет нормально работать при быстрой смене фото(допустим через клавиатуру по кнопкам если делать), но такое решение как бы не реактовское. Реакт тут мешает получается. Есть библиотеки да, которые допустим несут какой-то лишний функционал, но тогда в идеале было бы, если бы ты показала кастомное решение именно в реакт-стиле.

[МаксимМаксим-рф]

Здравствуйте, пересмотрел дважды, при клике до последней фотографии(7 из 7) приложение ломается и выдаёт ошибку
Uncaught TypeError: Cannot set properties of undefined (setting 'active')

То есть data-active у последней img даже не успевает стать true.

[YariRu]

Эти галереи уже всех задолбали, и я не про ваши, а про свои. Уже сделал 3-4. Просто боль.