Анимация бутстрапа Колонка Точки перерыва

Мне просто интересно, есть ли способ анимировать точку разгрузки бутстрапа. Например, у меня есть эта простая настройка колонки:Анимация бутстрапа Колонка Точки перерыва

<div class="container"> 
    <div class="row"> 
    <div class="col-md-6 col-sm-12"></div> 
    <div class="col-md-6 col-sm-12"></div> 
    </div> 
</div>

Теперь, как вы можете видеть на небольших устройствах, это будет отображать Див на отдельных линиях с использованием col-sm-12.

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

Я попытался с помощью перехода CSS все:

-moz-transition: all .5s linear; 
-webkit-transition: all .5s linear; 
transition: all .5s linear;

Однако это не работает, он просто переходит в ширину-х столбцов и не обкатки точки на новой линии.

Любая идея, как это возможно?

Спасибо, Ник

источник

2016-03-07 Nick Maddren

Почему именно вы хотите разместить там переход? Маловероятно, что люди, просматривающие ваш сайт, настраивают свой браузер (это единственный способ, которым они даже замечают этот переход). Они либо открывают его на обычном рабочем столе, планшете или мобильном телефоне, где возможные точки разрыва столбцов уже заняли свое место. – ProDexorite

Какое ** свойство ** вы ожидаете перехода? Документ reflow/wrappiing не является переходным, поскольку он не контролируется CSS. –

Вы должны предназначаться для DIV с классом = "Col-мкр-6 Col-см-12".

Как это:

.col-md-6.col-sm-12 { 
    transition: all 1.5s linear; 
    -o-transition: all 1.5s linear; 
    -moz-transition: all 1.5s linear; 
    -webkit-transition: all 1.5s linear; 
}

Я добавил немного более длинный переход, так что вы можете наблюдать эффект лучше.

источник

2017-04-26 13:47:54

Анимация бутстрапа Колонка Точки перерыва

ответ

Смежные вопросы