Flexbox 动画答案

【问题标题】：Flexbox animationsFlexbox 动画
【发布时间】：2015-06-25 06:08:29
【问题描述】：

当我的flexbox 项目从行到列时，我想为它们设置动画，同时更改浏览器窗口的大小。

<!DOCTYPE HTML>
<html>
<head>
<style>
body {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
div {   
    background-color : red;
    width:50px;
}
@media (max-width:500px) {
    body {
        flex-direction: column;     
    }
}
</style>
<body>
<div>
    <p>1st block</p>
</div>
<div>
    <p>2nd block</p>
</div>
<div>
    <p>3rd block</p>
</div>
<div>
    <p>4th block</p>
</div>    
</body>
</head>
</html>

这里我有 4 个块，我想让它响应但有一些使用 transition 属性的动画。请使用transition 并解释我可以将这部分代码放在哪里。

【问题讨论】：

你找到答案了吗？

标签： html css css-transitions flexbox

【解决方案1】：

你不能只用 CSS 来做到这一点——flex-direction 是 not animatable 属性：https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction。

查看 CSS3 动画属性列表：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties。

【讨论】：