html - CSS3 列布局中元素的动画位置

标签 html css css-transitions

我创建了一个 CSS 列布局,其中包含一些矩形 div。 <强> This is my code.

当用户点击它们中的每一个时,它应该被删除。我已经添加了 CSS3 过渡:

-webkit-transition: all 0.3s ease-in; /*Safari & Chrome*/
-moz-transition: all 0.3s ease-in; /* Firefox 4 */
-o-transition: all 0.3s ease-in; /* Opera */
transition: all 0.3s ease-in;

现在,单击的元素会有效删除,但其他矩形(在此 div 之后)会更改其位置,而不会产生任何效果。

当其他元素改变位置时,如何给它们添加效果? CSS3 Column 可以吗?如果不是,我应该选择哪种方法?怎么办?


注意:我将创建类似 Windows 8“开始”菜单的内容;当您删除其中的图 block 时,其他元素将通过动画移动到新位置。

最佳答案

我制作了div display: block 并给了它们float: left,这是你想要的效果吗? http://jsfiddle.net/AQ7bp/22/

关于html - CSS3 列布局中元素的动画位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13552568/

相关文章:

html - Bootstrap - 从 navbar-brand 中创建一个类似于 navbar-collapse 的下拉菜单?

html - 如何使这个水平框架与垂直框架相互对齐?

html - 链接显示在每一行,而不是内联

javascript - Accordion 菜单自动折叠

css - 如何在动画文本旁边 float 一个单词

css - 文本溢出渐变 - 悬停关闭时过渡不平滑

javascript - 如何将 input.value 上的一个字母替换为另一个字母

html - 如何获得带有导航的固定标题

html - 无法缩小我的饼图

css - 如何创建 CSS3 弹跳效果