Question

我试图设置一个简单的项目网格，只需点击一下按钮就可以打开和关闭某些项目。

现在，当单击按钮后某些元素消失时，网格中的项目开始切换位置。在下面的JSFiddle示例中，您可以看到水平过渡完美地工作，滑入到位，但垂直过渡不是。

我很感激如何解决这个问题/应用过渡到元素的移动。

HTML：

<div class="container">
  <div class="item example"></div>
  <div class="item example"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="button" id="toggle">Toggle</div>
</div>

CSS：

@import url(http://fonts.googleapis.com/css?family=Montserrat);

body {
  background: #385170;
}

.container {
  height: 675px;
  width: 900px;
  background: #f5f5f5;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.item {
  display: inline-block;
  height: 200px;
  width: 20%;
  position: relative;
  background: #cfcfcf;
  margin: 22.5px;
  float: left;
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transition: all .35s ease, opacity .2s;
          transition: all .35s ease, opacity .2s;
  overflow: hidden;
}

.button {
  font-family: 'Montserrat';
  color: #ea4c89;
  border: 2px solid #ea4c89;
  height: 40px;
  width: 100px;
  padding-top: 20px;
  text-align: center;
  cursor: pointer;
  position: absolute;
  bottom: 100px;
  left: 50%;
  margin-left: -50px;
  -webkit-transition: color .35s, background .35s ease;
          transition: color .35s, background .35s ease;
}
.button:hover {
  color: #FFF;
  background: #ea4c89;
}

.example {
  background: #ea4c89;
}
.example.hidden {
  -webkit-transform: scale(0, 0);
      -ms-transform: scale(0, 0);
          transform: scale(0, 0);
  width: 0%;
  opacity: 0;
  margin: 0;
}

JS：

$('#toggle').on('click touchstart', function() {
  $('.example').toggleClass('hidden');
});

JSFiddle here

Answer 1

那是因为其他元素的位置取决于这些内联块在网格中布局;

在您添加课程.hidden时使用您的代码实际进行的是您缩小它们（transform: scale(0, 0)）和set margin : 0。

Here's a working fiddle，看看设置opacity:0会发生什么，使用visibility:hidden属性可能会更好。

Answer 2

我认为你无法通过CSS过渡来实现这一点，我认为当你改变浏览器的宽度时，它会涉及一些类似于Mason的JavaScript，例如：http://masonry.desandro.com/

Answer 3

没有javascript好吗，你去吧：
的 DEMO

<强> TL;博士
基本上它将网格中的每个位置添加到您的CSS。 XD（不推荐）

使用当前的css3，没有好办法。因为手动添加每个网格位置是 ~~ass~~ 对接的痛苦。

<强> CSS 像display:inline和float:left这样的属性不能生动。但改造可以我们怎么用这个？ transform:translate3d()是可动画的，所以我们将它用于我们的网格现在我们可以设置translate3d（0％，0％，0）;对于第一个位置和translate3d（100％，0,0）为第二个等。

但这仅适用于水平元素：
对于x线和y线都translate 因此，设置translate3d(0%, 100%, 0)将是下一列的第一个位置。 3列的200％，依此类推。

在网格中过渡移动元素

3 个答案: