如何隐藏具有平滑效果的 flexbox 元素

Question

我需要将 div 居中并在每次点击时隐藏它们，问题是当我使用 hide() 和 flexbox 时，它会在 dissapear 后产生粗鲁的效果，但如果你只是简单地将元素浮动到左边就可以了，如何我能做到吗？

我需要应用与 第一个示例到第二个示例（使用 flexbox）。

示例如下：

$(".example1, .example2").click(function(){
    $(this).hide("slow")
});

.main{
  border: 2px solid black;
  height: 100%;
  width: 100%;
}
.example1{
  background-color: grey;
  width: 50px;
  height: 50px;
  margin: 10px;
  float: left;
}

.example2{
  background-color: grey;
  width: 50px;
  height: 50px;
  margin: 10px;
  float: left;
  text-align: center;
  margin-left: 8px;
}
.second{
  border: 2px solid black;
  display:                 flex;
  display:                 -webkit-flex; 
  flex-wrap:               wrap;
  -webkit-flex-wrap:       wrap;        
  justify-content:         center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main"> 
With simple float left it hides slowly fine:
<div class="first">
    <div class="example1">1</div>
    <div class="example1">2</div>
    <div class="example1">3</div>
    <div class="example1">4</div>
    <div class="example1">5</div>
    <div class="example1">6</div>
    <div class="example1">7</div>
    <div class="example1">8</div>
    <div class="example1">9</div>
    <div class="example1">10</div>
    <div class="example1">11</div>
    <div class="example1">12</div>
    <div class="example1">12</div>
    <div class="example1">13</div>
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
Now flex center, when you hide it makes rude effect, it isnt like div.example1:
<div class="second">
    <div class="example2">1</div>
    <div class="example2">2</div>
    <div class="example2">3</div>
    <div class="example2">4</div>
    <div class="example2">5</div>
    <div class="example2">6</div>
    <div class="example2">7</div>
    <div class="example2">8</div>
    <div class="example2">9</div>
    <div class="example2">10</div>
    <div class="example2">11</div>
    <div class="example2">12</div>
    <div class="example2">13</div>
    <div class="example2">14</div>
</div>
</div>

Answer 1

使用flex-start 代替justify content 而不是center。现在它与float 具有相同的效果。你也可以用fadeOut代替hide来达到你想要的效果。

$(".example1, .example2").click(function(){
    $(this).fadeOut("slow")
});

.main{
  border: 2px solid black;
  height: 100%;
  width: 100%;
}
.example1{
  background-color: grey;
  width: 50px;
  height: 50px;
  margin: 10px;
  float: left;
}

.example2{
  background-color: grey;
  width: 50px;
  height: 50px;
  margin: 10px;
  display: flex;
  justify-content: flex-start;
  text-align: center;
  margin-left: 8px;
}
.second{
  border: 2px solid black;
  display:                 flex;
  display:                 -webkit-flex; 
  flex-wrap:               wrap;
  -webkit-flex-wrap:       wrap;        
  justify-content:         center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main"> 
With simple float left it hides slowly fine:
<div class="first">
    <div class="example1">1</div>
    <div class="example1">2</div>
    <div class="example1">3</div>
    <div class="example1">4</div>
    <div class="example1">5</div>
    <div class="example1">6</div>
    <div class="example1">7</div>
    <div class="example1">8</div>
    <div class="example1">9</div>
    <div class="example1">10</div>
    <div class="example1">11</div>
    <div class="example1">12</div>
    <div class="example1">12</div>
    <div class="example1">13</div>
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
Now flex center, when you hide it makes rude effect, it isnt like div.example1:
<div class="second">
    <div class="example2">1</div>
    <div class="example2">2</div>
    <div class="example2">3</div>
    <div class="example2">4</div>
    <div class="example2">5</div>
    <div class="example2">6</div>
    <div class="example2">7</div>
    <div class="example2">8</div>
    <div class="example2">9</div>
    <div class="example2">10</div>
    <div class="example2">11</div>
    <div class="example2">12</div>
    <div class="example2">13</div>
    <div class="example2">14</div>
</div>
</div>

Answer 2

首先，您会注意到，当您尝试从最后一行（不包括最后一行中的第一个）删除项目时，不会发生此问题。当行 n 的第一个元素由于 2 件事而突然转到行 n-1 时，就会出现问题：

1. 您正在尝试删除此 first 元素，使其宽度变为 0，然后确保他能够放入前一行。
2. 您正在尝试删除任何元素，使其宽度变为 0，并且您正在为下一行的第一个元素创建足够的空间来跳转。

这仅仅是由于居中对齐，因为如果你用浮动、内联块或弹性来做没有区别。发生的事情是，在过渡期间，所有元素都移动到中心，当新元素到来时（下一行的第一个元素），所有元素都被重新放置以保持中心对齐，然后你有 粗鲁的影响！

使用左对齐，所有元素将在过渡期间向左移动，并且在过渡结束时（当新元素到来时）它们不会再次移动，因此我们没有任何粗鲁的效果。

这是一个 sn-p，它显示了 inline-block 和 flex 在左对齐的情况下工作正常：

$(".example2, .example1").click(function() {
  $(this).hide("slow");
  
});

.main {
  border: 2px solid black;
  height: 100%;
  width: 100%;
}

.example1 {
  background-color: grey;
  width: 50px;
  height: 50px;
  margin: 10px;
  text-align: center;
  display:inline-block;
  margin: 8px;
  transition:margin 0.6s;
}
.example2 {
  background-color: grey;
  width: 50px;
  height: 50px;
  margin: 10px;
  text-align: center;
  float:left;
  display:inline-block;
  margin: 8px;
  transition:margin 0.6s;
}
.first {
  border: 2px solid black;
  display: flex;
  flex-wrap: wrap;
}

.second {
  border: 2px solid black;
  display: flex;
  flex-wrap: wrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  inline-block 
  <div class="first">
    <div class="example1">1</div>
    <div class="example1">2</div>
    <div class="example1">3</div>
    <div class="example1">4</div>
    <div class="example1">5</div>
    <div class="example1">6</div>
    <div class="example1">7</div>
    <div class="example1">8</div>
    <div class="example1">9</div>
    <div class="example1">10</div>
    <div class="example1">11</div>
    <div class="example1">12</div>
    <div class="example1">13</div>
    <div class="example1">14</div>
    <div class="example1">15</div>
    <div class="example1">16</div>
    <div class="example1">17</div>
    <div class="example1">18</div>
    <div class="example1">19</div>
  </div>
   flex solution
  <div class="second">
    <div class="example2">1</div>
    <div class="example2">2</div>
    <div class="example2">3</div>
    <div class="example2">4</div>
    <div class="example2">5</div>
    <div class="example2">6</div>
    <div class="example2">7</div>
    <div class="example2">8</div>
    <div class="example2">9</div>
    <div class="example2">10</div>
    <div class="example2">11</div>
    <div class="example2">12</div>
    <div class="example2">13</div>
    <div class="example2">14</div>
    <div class="example2">15</div>
    <div class="example2">16</div>
    <div class="example2">17</div>
    <div class="example2">18</div>
    <div class="example2">19</div>
  </div>
</div>

不幸的是，如果您只想使用 jQuery 的 hide()，我没有解决方案。也许解决方案的一些想法是制作一个更复杂的代码，以避免居中元素在两个方向上移动（例如，您可以同时更改边距属性以取消移动）或者您可以保持左对齐并找到一些技巧来模拟居中（例如，在调整窗口大小时动态添加一些边距）。

希望这会帮助您进行更多调查（即使我没有真正给出解决方案）。

Answer 3

我的想法是：在重新排序期间淡化整个父容器。 效果不会那么粗鲁。

$(".second div").click(function() {
  $(this).hide("slow");
  var p = $(this).parent();
  p.addClass("hidden");
  setTimeout(function() {
    p.removeClass("hidden")
  }, 300);
});

p {
  clear: both;
}

.second {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border: 2px solid black;
  transition: 200ms;
}

.second div {
  background-color: grey;
  width: 50px;
  height: 50px;
  margin: 10px;
}

.hidden {
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="second">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
</div>

Answer 4

我将 justify-content: center 改为 justify-content: space-evenly （在你的情况下，看起来有点类似于仅中心）还将功能从简单地隐藏到 .animate，然后是 .hide。会吗？

$(".example1, .example2").click(function(){
    var _this = this;
    $(_this).animate({width: "0"}, 500, function(){ $(_this).hide(500) })
});

.main{
  border: 2px solid black;
  height: 100%;
  width: 100%;
}
.example1{
  background-color: grey;
  width: 50px;
  height: 50px;
  margin: 10px;
  float: left;
}

.example2{
  background-color: grey;
  width: 50px;
  height: 50px;
  margin: 10px;
  float: left;
  text-align: center;
  margin-left: 8px;
  overflow: hidden;
}
.second{
  border: 2px solid black;
  display:                 flex;
  display:                 -webkit-flex; 
  flex-wrap:               wrap;
  -webkit-flex-wrap:       wrap;        
  justify-content:         space-evenly;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main"> 
With simple float left it hides slowly fine:
<div class="first">
    <div class="example1">1</div>
    <div class="example1">2</div>
    <div class="example1">3</div>
    <div class="example1">4</div>
    <div class="example1">5</div>
    <div class="example1">6</div>
    <div class="example1">7</div>
    <div class="example1">8</div>
    <div class="example1">9</div>
    <div class="example1">10</div>
    <div class="example1">11</div>
    <div class="example1">12</div>
    <div class="example1">12</div>
    <div class="example1">13</div>
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
Now flex center, when you hide it makes rude effect, it isnt like div.example1:
<div class="second">
    <div class="example2">1</div>
    <div class="example2">2</div>
    <div class="example2">3</div>
    <div class="example2">4</div>
    <div class="example2">5</div>
    <div class="example2">6</div>
    <div class="example2">7</div>
    <div class="example2">8</div>
    <div class="example2">9</div>
    <div class="example2">10</div>
    <div class="example2">11</div>
    <div class="example2">12</div>
    <div class="example2">13</div>
    <div class="example2">14</div>
</div>
</div>

Answer 5

您可以在没有flex 的情况下实现上述目的，方法是将子div's 设置为inline-block，将父设置为text-align:center，请看一下。

$(".example1, .example2").click(function(){
    $(this).fadeOut("slow");
});

.main{
  border: 2px dotted black;
  height: 100%;
  width: 100%;
}
.example1{
  display: inline-block;
  background-color: steelblue;
  color: #FFF;
  cursor: pointer;
  margin: 10px;
  padding: 15px 20px;
}

.first{
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div class="main"> 
<div class="first">
    <div class="example1">1</div>
    <div class="example1">2</div>
    <div class="example1">3</div>
    <div class="example1">4</div>
    <div class="example1">5</div>
    <div class="example1">6</div>
    <div class="example1">7</div>
    <div class="example1">8</div>
    <div class="example1">9</div>
    <div class="example1">10</div>
    <div class="example1">11</div>
    <div class="example1">12</div>
    <div class="example1">12</div>
    <div class="example1">13</div>
    </div>
</div>

Answer 6

正如已经指出的那样，它需要某种“物理引擎”将其他块平滑地向上移动等。

但我还是做了一个尝试，至少看起来更流畅一些。

$(".example1, .example2").click(function(){
      var time = 600;
      var $parent = $(this).parent();
      $parent.animate({'width': '90%'}, time/2, function() {
           $parent.animate({'width': '100%'}, time/2);    
    });
    $(this).hide(time);    
});

.main{
  border: 2px solid black;
  height: 100%;
  width: 100%;
}
.example1{
  background-color: grey;
  width: 50px;
  height: 50px;
  margin: 10px;
  float: left;
}

.example2{
  background-color: grey;
  width: 50px;
  height: 50px;
  margin: 10px;
  float: left;
  text-align: center;
  margin-left: 8px;
}
.second{
  display:                 flex;
  display:                 -webkit-flex; 
  flex-wrap:               wrap;
  -webkit-flex-wrap:       wrap;        
  justify-content:         center;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main"> 
<div class="second">
    <div class="example2">1</div>
    <div class="example2">2</div>
    <div class="example2">3</div>
    <div class="example2">4</div>
    <div class="example2">5</div>
    <div class="example2">6</div>
    <div class="example2">7</div>
    <div class="example2">8</div>
    <div class="example2">9</div>
    <div class="example2">10</div>
    <div class="example2">11</div>
    <div class="example2">12</div>
    <div class="example2">13</div>
    <div class="example2">14</div>
</div>
</div>