fadeIn() для flex-контейнера

Суть задачи в том, чтобы сделать плавное появление и скрытие flex-контейнера.

Если использовать просто fadeIn(), то блоку будет задано свойство display: block;. Можно, конечно, flex-контейнер поместить внутрь этого блока, но мы не ищем легких путей. Нам нужен один контейнер, у которого будет display: flex; и он будет плавно появляться как при использовании fadeIn().

Для этого будем использовать такой скрипт:

$(".flex-block").css("display", "flex").hide().fadeIn();

Вот такой живой пример:

See the Pen oNbBdOL by Denis (@deniscreative) on CodePen.dark

Задаем размер 100vh без прокрутки для мобильных устройств

Суть задачи будет понятна для тех, кто уже столкнулся с этой проблемой. Но попробую объяснить…

Делаем блоки одинаковой ширины с помощью Javascript

Можно сделать блоки одинаковой ширины с помощью Flex, можно задать ширину с помощью фиксированных размеров,…

Анимированная рамка с градиентом с помощью SVG

В общем, когда-то давно была задача сделать рамку вокруг кнопки с градиентом, оказалось, что это…

Минификация и сжатие HTML в GULP 4

Уменьшаем вес файлов HTML — для этого убираем все переносы и лишние пробелы, а так…

Ответить