如何使用 CSS 过渡为响应式布局的垂直方向设置动画？

Question

当浏览器大小达到某个断点时，我正试图找到一种方法来平滑地动画化对某些元素的display属性的响应更改。我想使用CSS转换，但它们不适用于display属性，所以我可能必须找到一个解决方法。需要明确的是，我只是在对以前水平排列的元素的垂直方向进行动画更改时遇到了问题。其他简单、响应迅速的动画已经设置好了，没有任何问题。

下面是一个简单的示例

在该示例中，我为在给定断点处激活的div维度设置了有效的转换。最后一个(最小窗口)转换会使div垂直排列。起初，这是通过简单地将div从display:inline-block;更改为display:block;来实现的。然而，这无法使用CSS转换进行动画化，所以我尝试了另一种方法。替代方案包括将div从position:relative;更改为position:absolute;，并调整其top属性。我原以为CSS转换能够有效地使top中的变化生动起来，但这似乎并没有发生。

有人有什么建议吗？

Answer 1

您的问题是从相对变为绝对。这是不能以任何方式转变的。

只要试着保留你的样式，只更改数字属性。

例如，您可以继续使用相对位置，并相应地调整左侧和顶部的值：

@media (max-width: 680px) {
.box {
width:150px;
height:150px;
}
#box1 {
left: 165px;
top:10px;
}
#box2 {
left: 0px;
top:170px;
}
#box3 {
left: -165px;
top:330px;
}
}

演示

稍微改变一下风格，以避免小屏幕中的丑陋行为

@media (max-width: 680px) {
.box {
width:150px;
height:150px;
margin-left: -77px;
margin-right: -77px;
left: 0px;
}
#box1 {
top:10px;
}
#box2 {
top:170px;
}
#box3 {
top:330px;
}
}

新的演示

当容器宽度无法容纳3个div时，问题就出现了，它们开始流向另一行。

Answer 2

不要使用位置或显示，而是使用float元素并给出另一个断点，这样您就可以查看转换是如何进行的。

这是小提琴http://jsfiddle.net/822bX/

.box {
float:left;
width:300px;
height:300px;
margin:0 5px;
}
@media (max-width: 680px) {
.box {
width:150px;
height:150px;
-moz-transition:width 2s, height 2s, background-color 2s, -moz-transform 2s;
-webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;
-o-transition:width 2s, height 2s, background-color 2s, -o-transform 2s;
transition:width 2s, height 2s, background-color 2s, transform 2s;
clear:both;
}
}
@media (max-width: 380px) {
.box {
width:80px;height:80px;
}}