У меня есть два таких столбца:
<div class="container">
<div class="row">
<div class="col-9"></div>
<div class="col-3"></div>
</div>
</div>
Я переключаю имена классов через angular на col-8 offset-2 и col-0 . col-0 это width:0;margin:0;padding:0.
Мне интересно, как анимировать ширину и положение столбцов.
Поскольку Bootstrap 4 использует flexbox, анимация перехода CSS не работает, если вы не используете числовое значение flex-grow или flex-shrink для столбцов.
.col-8 {
flex-grow: 1;
transition: all 400ms ease;
}
.col-0 {
width: 0;
flex-shrink: 1;
transition: all 400ms ease;
}
Демонстрация: http://www.codeply.com/go/4Un0Q8CvkQ
Чтобы анимировать столбцы сетки при изменении контрольных точек медиазапроса (вместо переключения классов через jQuery), вы можете просто использовать переход CSS для столбцов сетки.
.row [class*='col-'] {
transition: all 0.5s ease-in-out;
}
Демонстрация: https://www.codeply.com/go/IHUZcvNjPS
Я изменил размер столбца, используя размеры столбцов, предоставленные Bootstrap. Например, col-2 в col-1. Затем я настроил переход только для определенного типа.
.row [class*='col-'] {
transition: flex 0.5s ease-in-out, max-width .5s ease-in-out;
}
