Как сделать плавное появление элемента REACT // React Transition Group
HTML-код
- Опубликовано: 31 янв 2021
- Сегодня я поделюсь способом как сделать плавное появление элементов в React. С помощью библиотеки react transition group.
► Интенсив React с нуля (приложение для тренировок) - clck.ru/WhRUz
► Интенсив Node.js + Express - Backend с нуля - clck.ru/WhRVu
► Интенсив по верстке сайта с 0 - clck.ru/WhRWW
---------------------------------------------------------------------------------------------------
➡️Хранилище (здесь все файлы к видео) *требуется авторизация - htmllessons.ru/storage
➡️Научим разрабатывать сайты - htmllessons.ru/
➡️Personal Instagram - / maxzbs
➡️Personal YT - / @maxhustleinsilence
----------------------------------------------------------------------------------------------------
✈️ Получи до 4000 руб. на первое бронирование через Airbnb - abnb.me/e/Mgl6khUuN3
💸 Если хочешь поддержать, вот ссылка (сейчас сбор на камеру Sony a6400) - www.donationalerts.com/r/redg...
----------------------------------------------------------------------------------------------------
➡️Мой сетап 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. Основная миссия нашей команды - создавать крутые продукты, которые будут помогать людям и менять мир. Буду рад, если Вы нас поддержите и подпишитесь на наш канал. Спасибо 😊
Сегодня я поделюсь способом как сделать плавное появление элементов в React. С помощью библиотеки react transition group.
Видос клёвый! Сам сейчас реакт осваиваю. Недавно целый день сидел над 'react-beautiful-dnd' поэтому прекрасно понимаю твою радость, когда получается всё подключить и правильно настроить!=)
Реально ПУШКА! ) Подписка и лайк!
То, что искал, полезно, спасибо!)
Спасибо за видео! Хотел что-то подобное реализовать на своем проекте, но так до конца и не разобрался с этой библиотекой. Теперь все стало понятно. Пойду запиливать данную фишку себе
Привет, Макс) Очень полезный видос получился🔥
Огонь! Супер полезно!
Парень красавчик, все грамотно объяснил! Лайк
Очень полезно, спасибо
Макс, подскажи какая тема у тебя в VS Code?
Bearded theme
Спасибо!)
Бро, спасибо!
Спасибо за видео! Можно ли как - то делать такое плавное появление всей страницы при загрузке?
framer-motion тебе поможет. С ним ты ограничен только твоей фантазией
А если у меня 4 таких элемента, как мне сделать так чтобы они не все сразу открывались, а открывался тот на который я кликаю?
а что за тема у VS CODA?
А как можно сделать, чтобы элементы анимировались без клика?
Круто! Спасибо. Как сделать так чтобы в VS Code файлы и папки подсвечивались так же как и у тебя?
Material icons
Material Icon Theme
Скачайте расширение
Я никак не могу в чем разница между Transition, CSStransition,
TransitionGroup и Switchtransition и когда их использовать?
display: none тоже убирает из html насколько мне известно (правда ему transition не задать). Если я правильно понял именно поэтому ты используешь эту библиотеку?
А стоит ли раздувать бандл только из-за одного эффекта?
Так, в целях того, что есть такая библиотека конечно полезно знать)
display none отключает отображение тега, но он все еще присутствует в ДОМ и в разметке
@@justdude2599 а visibility: hidden?
@@Sergey_Klimov Очень сомневаюсь, это стили, они не могут повлият на дом дерево или на саму разметку, а вот условная отрисовка может
Лайк поставлю! Побольше снимай у тебя хорошо получается! Я считаю что это бесполезная библиотека для реакта, можно это и в ручную написать. Единственное что понравилось это удаление html в отличии от добавление класса если делать в ручную.
🖖
yarn по дефолту вроде как потому что он также от разработчиков Facebook
Да