jquery - css3 列 + 响应式布局 : animate item position changes. 使用 css3 或 jquery/javascript

Question

我正在创建一个砖石风格的布局，但为列使用了 css3，因为它让我可以更轻松、更精确地构建布局，特别是因为我正在构建一个响应式布局。

现在，我使用 css3 媒体查询根据窗口大小更改显示的列数。我想要做的是当列数随着窗口大小的变化而变化时，为列之间列元素的位置变化设置动画。

这是我的一些CSS代码:

@media all and (min-width: 961px) and (max-width: 1599px){
    #portfolio {
        width:100%;
        position:relative;
        text-align:center;
        -moz-column-count:4;
        -moz-column-gap:3px;
        -webkit-column-count:4;
        -webkit-column-gap:3px;
        column-count:4;
        column-gap:3px;
    }
}
@media all and (min-width: 1600px){
    #portfolio {
        width:100%;
        position:relative;
        text-align:center;
        -moz-column-count:5;
        -moz-column-gap:3px;
        -webkit-column-count:5;
        -webkit-column-gap:3px;
        column-count:5;
        column-gap:3px;
    }
}

有人知道如何处理吗？ TIA。

Answer 1

查看动画属性:

/* Animation Property */
animation-property: width;
animation-property: height;
transition-duration: 1s;
/* webkit */
-webkit-animation-property: width;
-webkit-animation-property: height;
-webkit-transition-duration: 1s;
/* moz */
-moz-animation-property: width;
-moz-animation-property: height;
-moz-transition-duration: 1s;
/* opera */
-o-animation-property: width;
-o-animation-property: height;
-o-transition-duration: 1s;

示例:http://theboywhocriedfox.com/demo/animate-transitions-with-media-queries/