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.