Работая с Materialize CSS, я ищу способ анимировать изменение размера столбца.

Например:

<div id="col1" class="col s6">Some Content</div>
<div id="col2" class="col s6">More Content</div>

Перейдет на:

<div id="col1" class="col s8">Some Content</div>
<div id="col2" class="col s4">More Content</div>

Любые мысли или направления будут оценены.

2
John Cappelletti 1 Мар 2018 в 05:15

1 ответ

Лучший ответ

В то время как Materialize CSS не имеет встроенного перехода для изменения размеров столбцов. Вы можете анимировать переход, указав css transition для нужных элементов,

div.col{
    transition: all .3s ease;
}

И используя предпочитаемый вами метод jquery для переключения классов.

$('.col').hover(function() {
    $('#col1').toggleClass('s8 s6');
    $('#col2').toggleClass('s4 s6');
});

jsfiddle

2
hcoat 1 Мар 2018 в 08:39