使用CSS3过渡将元素移动到新位置

时间:2014-01-05 12:55:34

标签: javascript jquery css css3 transitions

我正在尝试使用一个库,我试图在这种情况下限制jQuery的使用。如下面的屏幕截图所示,我总是有2个项目彼此相邻:http://prntscr.com/2gpi01。它们被设置为向左浮动,每当一个被移除或设置为不显示时,另一个项目就取代它。这工作正常,但我想添加一个转换,以便新项目移动到旧项目的位置。我经常在网上看到这一点,通过简单地删除一个项目,另一个项目可以顺利地滑入其新的位置。这有可能用CSS3过渡吗?

2 个答案:

答案 0 :(得分:0)

您可以使用max-width为<{1}}设置动画。

在click事件中,您需要为单击的元素添加类transition

如果您有这样的标记:

hidden

您可以使用以下CSS执行动画:

<ul class="gallery">
    <li><img src="image1" alt=""></li>
    <li><img src="image2" alt=""></li>
</ul>

这是一个演示: http://cssdeck.com/labs/pqbkirfl

答案 1 :(得分:0)

使用CSS是不可能的,因为CSS不会检查是否删除了任何子元素!

您可以使用

试用动画
transition: margin-top 2s;

这样,元素的margin-top变化将以动画方式在2秒内完成。

但要检测元素的删除,您需要使用jQuery!

由于您希望仅在删除元素时才进行动画,因此可以尝试添加类或删除其他元素的类。这样,当添加类时,将发生动画(CSS)并且它将为其属性设置动画(margin-top)。