CSS在浮动重定位过渡 [英] CSS Transition on float relocation

问题描述

我正在使用这样的工具： http://jsfiddle.net/Hh2Ht/ p>

如你所见，我有一组具有相同宽度但不同高度的浮动div。然而，容器有一个百分比的宽度和作为一个连续，当改变它的大小浮动divs改变其位置。

我想这个位置的变化是动画，使用css转换。我可以做绝对定位，一点点JavaScript的calc的定位和绑定的过渡效果到顶部和左边的特性，但是我想要模拟的浮动div的行为，它将是非常好的没有绝对定位。

你认为这是可能吗？先谢谢。

解决方案

我真的不确定是否可以重新定位块，就像你用纯CSS描述的。主要是因为一些块必须移动到DOM中的不同位置，这是CSS不可能的。

您尝试使用 Isotope 插件？检查他们的网站，也许这是你要找的。

I'm working with something like this: http://jsfiddle.net/Hh2Ht/

As you can see, I have a group of float divs with the same width but with different heights. However, the container have a percentual width and as a consecuence, when changes its size the floating divs changes its position.

I would like that this change of position was animated, using css transitions. I could do that with absolute positioning, a little bit of javascript to calc the positioning and binding the transition effect to top and left propierties, but as I want to emulate exactly the behavior of float divs it would be excellent do it without absolute positioning.

Do you think that it is possible? Thank you in advance.

解决方案

I am really not sure it's possible to relocate blocks as you described with pure CSS. Mainly that's because some of the blocks would have to be moved into different position in DOM which is not possible with CSS.

Have you tried using Isotope plugin? Check their website, maybe that's what you're looking for.

这篇关于CSS在浮动重定位过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！