2016-12-03 1 views
1

настоящее время я использую подвесную систему семантического-UI, но этот вопрос будет также применяться к любой системе, другой сетки (самозагрузки ...)подвесная система - плавный переход, когда столбец/дел получает толкнул на следующую строку

I Habe четыре столбца в строке, в которой размещены карты (много карт с ngFor от углового2). Когда я нажимаю на карту, она увеличивается до половины размера строки (для этого я использую ngClass углового 2)

Теперь очевидно, что карты с правой стороны будут перенесены в следующую строку, и я хочу, чтобы переход был «гладко». Какие-либо предложения?

Спасибо!

+0

Вы можете сделать что-то подобное, но для этого вам нужен JavaScript. Захватите событие клика, а затем обнаружите 2 карты в конце (так как вторая карта не будет нажата, а 3-я и 4-я). Отсюда клонируйте эти объекты и переместите их на следующую строку. Убедитесь, что они начинают с страницы, а затем оживляют их слева направо. Используйте равное время анимации, как и при создании карты до «половины строки», и она должна выглядеть довольно безвкусицей – Ohgodwhy

+0

, поэтому в основном мне нужно написать метод обнаружения карт, которые будут перенесены в следующую строку, что приведет к «привязке», и вручную их оживить? –

+0

Я бы сказал, что это определенно один из способов сделать это, да! – Ohgodwhy

ответ

0

Вы можете добавить css-переход в столбцы. например:

div[class^="col-"] { 
    transition: width 0.3s, height 0.3s; 
} 

Это выбирает все элементы DIV с классом, начиная с col- и добавляет переход к высоте и ширине. вы можете изменить значение в секундах, чтобы настроить скорость перехода. Этот пример не включает префиксы поставщиков. Вы можете узнать больше о переходах здесь https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

+0

спасибо за ответ, но это только оживляет изменение col, а не «привязку», когда col попадает в другую строку. –