列大小的动画移位

Question

使用Materialise 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>

任何想法或方向都会受到赞赏。

Answer 1

虽然Materialise CSS没有用于移动列大小的内置转换。您可以通过为所需元素指定css transition来为转换设置动画，

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

并使用您首选的jquery方法来切换类。

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

jsfiddle