Загрузка страницы

Как я делаю анимацию модальных окон

Под одним из предыдущих видео, подписчики попросили записать видео про анимацию попапов. Я обещал, если комментарий наберет 100 лайков, то я это сделаю. Ну что же, 100 лайков есть - вот вам и видео!

Демо: https://sin9k.github.io/modal-animations
Github: https://github.com/Sin9k/modal-animations

Ссылка на конференцию HolyJS: https://bit.ly/3BpxqRM

Поддержать Айти Синяка можно здесь:
YouTube: https://www.youtube.com/channel/UClgj-KWiNaOo9H1rz1ISO6Q/join
boosty: https://boosty.to/sin9k
Patreon: https://www.patreon.com/ITSin9k

00:00 Анонс темы
00:33 Новости
01:47 Демо
02:25 Интерфейс модального окна
03:10 Стартовая точка компонента модалки
04:05 Время анимации
05:40 useMount
07:00 Создаем компонент Layout
08:07 CSSTransition
10:40 CSS
12:38 Лайкайте комментарии и видео

Подписаться на канал: https://www.youtube.com/channel/UClgj-KWiNaOo9H1rz1ISO6Q?sub_confirmation=1
Twitter: https://twitter.com/it_sin9k

________________

Канал о Фронтенде, который хочется порекомендовать (telegram):
https://t.me/frontendnoteschannel

-------------------------

Данный канал создан для инициирования бесед на различные темы IT сферы (социальные / технические), а также для тех кому короткая видео выжимка статьи, выступления на конференции или же просто личных мыслей, являются более удобным форматом

Видео Как я делаю анимацию модальных окон канала АйТи Синяк
Показать
Комментарии отсутствуют
Введите заголовок:

Введите адрес ссылки:

Введите адрес видео с YouTube:

Зарегистрируйтесь или войдите с
Информация о видео
6 октября 2022 г. 12:00:21
00:13:20
Другие видео канала
Станет ли memo() дэфолтным поведением реакт компонента?Станет ли memo() дэфолтным поведением реакт компонента?Как настроить кросс командную темизациюКак настроить кросс командную темизациюБлок схема по использованию memo() && Боевые примерыБлок схема по использованию memo() && Боевые примерыкакая разница между useLayoutEffect, componentDidMount и useEffect?какая разница между useLayoutEffect, componentDidMount и useEffect?Arrow VS Classic Method in ES6 classArrow VS Classic Method in ES6 classЧем отличается SimpleMemoComponent от MemoComponent?Чем отличается SimpleMemoComponent от MemoComponent?Как мы решили проблемы с z-index + ВИКТОРИНА!Как мы решили проблемы с z-index + ВИКТОРИНА!Best Practices for useEffect by React DocumentationBest Practices for useEffect by React DocumentationЧто выбрать: глобальные переменные или useThis()?Что выбрать: глобальные переменные или useThis()?useMemo - исходники, альтернативное использование и мемоизация ссылкиuseMemo - исходники, альтернативное использование и мемоизация ссылкиПервое погружение в исходники хуков (задел на будущее)Первое погружение в исходники хуков (задел на будущее)Принцип разделения интерфейса || Interface Segregation PrincipleПринцип разделения интерфейса || Interface Segregation PrincipleВсе ли вы знаете о React key?Все ли вы знаете о React key?Почему удалять StrictMode плохая идея?Почему удалять StrictMode плохая идея?[доклад] React memo — сплетни исходники грань полезности[доклад] React memo — сплетни исходники грань полезностиЧто вы знаете о useCallback?Что вы знаете о useCallback?⚡ Router теперь умеет отправлять запросы ⚡⚡ Router теперь умеет отправлять запросы ⚡Исходники Context API + Redux vs ContextИсходники Context API + Redux vs ContextЛучшие примеры использования Context APIЛучшие примеры использования Context APIReact Router Form - совместили несовместимоеReact Router Form - совместили несовместимоеКак сделать Loader / Skeleton для серверных компонентовКак сделать Loader / Skeleton для серверных компонентов
Яндекс.Метрика