Как сделать плавный переход?

Question

[Артур Кудашев]

Здравствуйте, в портфолио есть работы и есть фильтрация работ. У работы есть анимация и она плавно пропадает и другие работы занимают ее место, но это происходит резко. Я не знаю как сделать это плавно.

Comments

[Ankhena]

У работы есть анимация и она плавно пропадает и другие работы занимают ее место, но это происходит резко.

Так анимация все таки есть или ее нет? Плавно или резко?
Выложите проблемный код в песочницу jsfiddle.net или codepen.io и опишите что должно происходить.

Простецкий вариант на коленке: https://jsfiddle.net/2ck7on4L/

[Артур Кудашев]

Ankhena, мне нужно также, но у меня не работает. Элемент пропадает, но пустое место остается, а у вас блоки занимают пустое место. Может дело в том что я использую css grid.

[Ankhena]

Артур Кудашев,

мне нужно также

С таким подходом на фриланс.

но у меня не работает

Если к этому еще добавить "вот мой неработающий код: ссылка, хелп ми плиз", есть шансы на получение помощи.

В теории: делать через keyframes и в конце менять order на последний.

[WapSter]

Можно использовать библиотеку masonry у нее есть анимация, но я так понял, что в js вы особо не шарите, и колбек функции вам ни о чем не говорят.

[MamaLuyba]

Артур Кудашев, ну дык перепиши под предложенный вариант с флексами, раз не хочешь нам код показывать. либо смотри template-areas грида, раз он пустые блоки оставляет.

[Ankhena]

MamaLuyba,

либо смотри template-areas грида, раз он пустые блоки оставляет

Не поможет, они не пустые

order поможет либо display: none с задержкой

[dicem]

я конечно хз, но ебани просто transition: all .3s;
На блоки портфолио или что у тебя там резко пропадает ( проинспектируй проверь, хоть что нибудь сделай уже )

Answer 1

[igumenov]

чтобы обмануть смещение нужно анимацией как бы все скрывать, а затем перестраивать и отображать
например
$('.item').fadeOut()
...
отсортировали..
$('.item').fadeIn()