jquery - 列大小的动画变化

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