css - 用于响应块的 Css 动画

Question

我不断地在舞台上添加新的块。所有积木都有风格float:left，因此它们彼此贴合。该width属性由 定义media，如下所示：

@media screen and (min-width: 0px) {
   .block { width: 100%; }
}

@media screen and (min-width: 300px) {
   .block { width: calc(100% / 2); }
}

@media screen and (min-width: 600px) {
   .block { width: calc(100% / 3); }
}

关键特征是块覆盖了整个窗口宽度。

问题是我不喜欢立即添加新块来推回所有以前的块。我知道如何为恒定宽度设置动画，但在这种情况下，我正在处理可变宽度（以 % 为单位），这取决于窗口大小。

我将不胜感激任何建议！

标签： cssanimationresponsive

Answer 1

我现在看到的唯一方法是添加resize侦听器并使用 js 控制一切......