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

Question

我需要居中div并在每次点击时隐藏它们,问题是当我使用它hide()并且flexbox它在消失后产生粗鲁效果,但是如果你只是简单地将元素向左移动它就可以了,我怎么能实现这个呢？

我需要将第一个示例中完全相同的消失效果应用于第二个示例(使用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>