Тёмный

Как сделать плавное появление элемента REACT // React Transition Group 

RED Group
Подписаться 69 тыс.
Просмотров 21 тыс.
50% 1

Сегодня я поделюсь способом как сделать плавное появление элементов в React. С помощью библиотеки react transition group.
► Интенсив React с нуля (приложение для тренировок) - clck.ru/WhRUz
► Интенсив Node.js + Express - Backend с нуля - clck.ru/WhRVu
► Интенсив по верстке сайта с 0 - clck.ru/WhRWW
---------------------------------------------------------------------------------------------------
➡️Хранилище (здесь все файлы к видео) *требуется авторизация - htmllessons.ru...
➡️Научим разрабатывать сайты - htmllessons.ru/
➡️Personal Instagram - / maxzbs
➡️Personal YT - / @maxhustleinsilence
----------------------------------------------------------------------------------------------------
✈️ Получи до 4000 руб. на первое бронирование через Airbnb - abnb.me/e/Mgl6...
💸 Если хочешь поддержать, вот ссылка (сейчас сбор на камеру Sony a6400) - www.donational...
----------------------------------------------------------------------------------------------------
➡️Мой сетап VS Code - • Настройка Visual Stud...
➡️Мой сетап Sublime Text 3 - • Настройка лучшего ред...
----------------------------------------------------------------------------------------------------
Немного обо мне: меня зовут Максим, я уже 7 лет занимаюсь веб-разработкой. На данный момент являюсь основателем двух крутых проектов redstudio.global и htmllessons.ru. Последний, был моей дипломной работой в колледже. Как и все, начинал с изучения верстки html, css, js. Затем появилась потребность в изучении Laravel для разработки образовательного проекта. На данный момент, мой стэк технологий выглядит так: html, css, javascript, jquery, bootstrap, flex, svg, vuejs, php, laravel и различные cms. Основная миссия нашей команды - создавать крутые продукты, которые будут помогать людям и менять мир. Буду рад, если Вы нас поддержите и подпишитесь на наш канал. Спасибо 😊

Опубликовано:

 

3 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 34   
@REDGroup
@REDGroup 3 года назад
Сегодня я поделюсь способом как сделать плавное появление элементов в React. С помощью библиотеки react transition group.
@HaywasterChannel
@HaywasterChannel Год назад
Парень красавчик, все грамотно объяснил! Лайк
@dianareadingbooks
@dianareadingbooks 3 года назад
Привет, Макс) Очень полезный видос получился🔥
@CosmoTrades
@CosmoTrades Год назад
Спасибо!)
@lumiuko
@lumiuko 3 года назад
Очень полезно, спасибо
@rolandsherier
@rolandsherier 3 года назад
Макс, подскажи какая тема у тебя в VS Code?
@REDGroup
@REDGroup 3 года назад
Bearded theme
@kanzler9170
@kanzler9170 Год назад
Спасибо за видео! Можно ли как - то делать такое плавное появление всей страницы при загрузке?
@Podolsky45
@Podolsky45 Год назад
framer-motion тебе поможет. С ним ты ограничен только твоей фантазией
@danyamaslov23
@danyamaslov23 Год назад
А если у меня 4 таких элемента, как мне сделать так чтобы они не все сразу открывались, а открывался тот на который я кликаю?
@Sergey_Klimov
@Sergey_Klimov Год назад
display: none тоже убирает из html насколько мне известно (правда ему transition не задать). Если я правильно понял именно поэтому ты используешь эту библиотеку? А стоит ли раздувать бандл только из-за одного эффекта? Так, в целях того, что есть такая библиотека конечно полезно знать)
@justdude2599
@justdude2599 Год назад
display none отключает отображение тега, но он все еще присутствует в ДОМ и в разметке
@Sergey_Klimov
@Sergey_Klimov Год назад
@@justdude2599 а visibility: hidden?
@justdude2599
@justdude2599 Год назад
@@Sergey_Klimov Очень сомневаюсь, это стили, они не могут повлият на дом дерево или на саму разметку, а вот условная отрисовка может
@sergeylunyaka4315
@sergeylunyaka4315 2 года назад
а что за тема у VS CODA?
@LEG1ONER
@LEG1ONER 2 года назад
Лайк поставлю! Побольше снимай у тебя хорошо получается! Я считаю что это бесполезная библиотека для реакта, можно это и в ручную написать. Единственное что понравилось это удаление html в отличии от добавление класса если делать в ручную.
@АндрейРосовский
@АндрейРосовский 3 года назад
Видос клёвый! Сам сейчас реакт осваиваю. Недавно целый день сидел над 'react-beautiful-dnd' поэтому прекрасно понимаю твою радость, когда получается всё подключить и правильно настроить!=)
@RinatWOT
@RinatWOT Год назад
Я никак не могу в чем разница между Transition, CSStransition, TransitionGroup и Switchtransition и когда их использовать?
@force_of_abstinence
@force_of_abstinence 2 года назад
А как можно сделать, чтобы элементы анимировались без клика?
@volmaks3396
@volmaks3396 3 года назад
yarn по дефолту вроде как потому что он также от разработчиков Facebook
@REDGroup
@REDGroup 3 года назад
Да
@ajladdin
@ajladdin 2 года назад
🖖
@SlavaOST
@SlavaOST Год назад
Спасибо за видео! Хотел что-то подобное реализовать на своем проекте, но так до конца и не разобрался с этой библиотекой. Теперь все стало понятно. Пойду запиливать данную фишку себе
@michaelkozhanoff545
@michaelkozhanoff545 2 года назад
Бро, спасибо!
@KuBa-tkm
@KuBa-tkm 3 года назад
Реально ПУШКА! ) Подписка и лайк!
@kostasancez2358
@kostasancez2358 3 года назад
Огонь! Супер полезно!
@АртемПономарев-ь6щ
То, что искал, полезно, спасибо!)
@evgenii.zaikin
@evgenii.zaikin 2 года назад
Круто! Спасибо. Как сделать так чтобы в VS Code файлы и папки подсвечивались так же как и у тебя?
@REDGroup
@REDGroup 2 года назад
Material icons
@michaelkozhanoff545
@michaelkozhanoff545 2 года назад
Material Icon Theme Скачайте расширение
Далее
ОВР Шоу:  Семейные понты  @ovrshow_tnt
07:21
When Goalkeepers Get Bored 🤯 #3
00:27
Просмотров 2 млн
МАЛОЙ ГАИШНИК
00:35
Просмотров 495 тыс.
I tried 8 different Postgres ORMs
9:46
Просмотров 414 тыс.
React и TypeScript - Быстрый Курс
1:40:52
Просмотров 352 тыс.
I Remade YouTube From Scratch Using Just Bash
17:51
Просмотров 13 тыс.
ОВР Шоу:  Семейные понты  @ovrshow_tnt
07:21