Как сделать JS/CSS слайдер с использованием flex элементов?

Question

[6epcepk]

Всем привет.

Есть верстка в 3 колонки, колонки - flex элементы. Вот JsFiddle.
Необходимо скрыть одну/две/все колонки с использованием transition.
Грубо говоря, как в dashboard.

1. Пробовал margin-left. Работает не корректно при колонках > 2. Даже если указывать 100% или offsetWidth элемента
2. Пробовал display-none, но он не поддерживает transition. Будущее еще не настало полностью.
3. Пробовал через opacity, но остается лишний gap контейнера
4. И еще, почему если у контейнера padding, то получается flex-basis не корректно работает (правый синий флекс уходит за границу контейнера).

В общем хотелось бы остаться на display-flex с position-relative, не готов пока переходить на css grid.

Comments

[Сергей delphinpro]

не готов пока переходить на css grid.

Как-будто замена двух строчек в css является великим переходом...

Answer 1

[Сергей delphinpro]

как-то так

Comments

[6epcepk]

Сергей, спасибо, все отлично работает.

Какие идеи есть, чтобы вручную не прописывать компенсацию gap?
Это все будет в бутстрапе, а так бы да, можно было одной переменной.

Или это уже надо JS брать гап из контейнера и подставлять нужный класс типа ms-n1?

[Сергей delphinpro]

6epcepk, можно так

.box {
  --box-gap: 10px;
  gap: var(--box-gap);
}

.left.off {
  margin-right: calc(var(--box-gap) / -1);
}

.right.off {
  margin-left: calc(var(--box-gap) / -1);
}

[6epcepk]

Сергей delphinpro, Сергей, а если в .left будет padding?
Ставлю в .off padding-0, но не совсем красиво выходит: сначала блок сдвигается (ок), потом начинает внутри уменьшаться padding до 0.
https://jsfiddle.net/k2y5uqa6/

[Сергей delphinpro]

6epcepk, тут надо понимать, что будут анимироваться только те свойства которые вы указали и изменили. Хотите менять и паддинги, - меняйте, но указывайте их в transitions (или указывайте all).