CSS позиционные переходы и отображение: нет

Question

CSS позиционные переходы и отображение: нет

0

У меня есть контент, где есть элементы, помеченные в разных категориях. Все отображаются в виде блока div; все одинаковы.

Существует возможность скрывать/отображать определенные категории элементов. Скрытые элементы отмечены как display:none а остальные остаются одинаковыми.

Обычно, как вы можете себе представить, остальная часть предметов мгновенно заполняет пространство, оставшееся от скрытых элементов. Тем не менее, я хочу, чтобы это произошло с переходом позиции CSS, поэтому все происходит не мгновенно, а со временем.

Чтобы упростить тестирование, я добавил этот бит в свой файл CSS:

*{
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

Вот кодовая ссылка:

http://codepen.io/zettam/pen/bazqF

Когда "скрытый" класс добавляется к элементу, элемент исчезает мгновенно, поэтому переход не происходит. Любые идеи о том, как сделать этот переход/перепозиционирование возможным?

Mia 04 нояб. 2013, в 22:59

Источник

Теги:

html

css

html5

css3

css-transitions

2 ответа

0

Я не уверен, что вы просите, НО Я считаю, что это может помочь

transition : position 0.5s ease-in-out;
-webkit-transition : position 0.5s ease-in-out;
-moz-transition : position 0.5s ease-in-out;
-o-transition : position 0.5s ease-in-out;

Fly-Project 04 нояб. 2013, в 19:03

0

Я хочу, чтобы остальные элементы позиционировали себя, используя переход.
Mia 04 нояб. 2013, в 21:53

Ещё вопросы

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

Daniel Forbes · Accepted Answer · 2013-11-04T19-15-00.000Z

Я думаю, что это то, что вы ищете:

http://blog.stevensanderson.com/2013/03/15/animating-lists-with-css-3-transitions/

Это очень близко! Можно ли добиться подобных результатов без использования translate3d?
Вы можете использовать translate и значения from в позицию пикселя. Найти и пример: developerdrive.com/2012/02/…