Выбор игры

Крестик внутри игры работает - можно удалять.

Берем блок .preview (блок самой игры) и обарачиваем его в .fade - сюда завязаны все анимации. К блоку .preview так же примиксовываем элемент .fade__content. В итоге получается такая структура:


.fade
    .fade__content.preview
    ...

Теперь работаем только с блоком .fade. Блок .preview боьше не трогаем. Более того, внутри может быть не только превью, а любой другой. Например тренды.

Модификаторы .fade_animation_in и .fade_animation_out - это наши классы для скрытия и показа, соответствено. Но просто добавлять и убирать эти классы - этого недостаточно.

Показ

Создаем элемент .preview в памяти.
Оборачиваем его в .fade, примиксовываем .fade__content
Добавляем модификатор .fade_animation_in
Выводим в DOM в нужное место (В стилях стоит opacity: 0 и height: 0)
Замеряем высоту содержимого: outerHeight на элементе .fade__content (несмотря на то, что у родителя высота нулевая, у потомка высота все-равно нормальная)
Проставляем эту высоту блоку .fade обычными инлайновыми стилями, проставляем так же opacity: 1 (тут верстка подхватит изменения и произойдет анимация).
Ставим таймаут на 500ms (время анимации 450ms плюс полтиник запасу, на случай рассинхрона). По таймауту убираем .fade_animation_in. Инлайновые стили height и opacity наоборот не надо удалять. Важно их оставить для удаления.

Скрытие

Ловим клик по крестику, добавляем .fade_animation_out
Перед тем как запускать анимацию удаления надо бы убедиться, что проставлены инлайново height: 123px и opacity: 1 (а они должны остаться из анимации показа). Если по какой-то причине это не так, то посчитать и проставить эту высоту.
Добавляем инлайново height: 0 и opacity: 0 (это можно было бы сделать версткой, но для сохранения общности с показом давай тоже делать JS`ом). (Тут верстка подхватит изменения в значениях высоты и прозрачности и заанимирует их).
Ставим таймаут на 500ms (так же 450ms анимации и небольшой запас) и через 500ms удаляем из DOM`а.

Тренды

Анимация у трендов точно такая же как и игры чуть выше. Те же классы, тот же функционал, те же проблемы. Я не знаю будет ли там удаление, но на всякий случай проработал в этой демке. Тут так же важно, чтобы перед удалением стояли актуальные инлайновые height и opacity на элементе. Стояли заранее. Например если страница при открытии уже может содержать тренды, то надо по ним пройтись и обсчитать их высоты.

Уведомления

(тут иконки поламались из-за того, что разметка в JS`е, а не в HTML и она не попала в галп)

Аналогично всему, что выше. Едиственное че тут, пришлось усложнить верстку самой нотификации на одну обертку из-за осттупа между. Раньше просто шли блоки .notification друг за другом, а сейчас стали блоком .informer который оборачивает старый .notification