1

我正在创建一个砖石风格的布局，但使用 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。

4

1 回答 1

0

请参阅动画属性：

/* 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/

于 2013-05-13T20:03:11.900 回答