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

我需要将div居中并在每次单击时隐藏它们，问题是当我使用

hide（）

和

flexbox

时，它在消失后会产生一种粗糙的效果，但如果您只是简单地将元素向左浮动，它会很好，我如何实现这一点

我需要应用完全相同的消失效果，这是在 第一个示例到第二个示例（使用flexbox）

以下是一个例子：

$（“.example1，.example2”）。单击（函数（）{
$（this.hide（“慢”）
});
.main{
边框：2件纯黑；
身高：100%；
宽度：100%；
}
.例1{
背景颜色：灰色；
宽度：50px；
高度：50px；
利润率：10px；
浮动：左；
}
.例2{
背景颜色：灰色；
宽度：50px；
高度：50px；
利润率：10px；
浮动：左；
文本对齐：居中；
左边距：8px；
}
.第二{
边框：2件纯黑；
显示器：flex；
显示：-webkit flex；
柔性包装：包装；
-webkit柔性包装：包装；
证明内容：中心；
}

使用简单的浮动，它会慢慢隐藏：
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
12
13














现在，flex center，当你隐藏它时会产生粗糙的效果，它不像div.example1：
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
使用
弹性启动
进行
内容调整
而不是
中心
。现在，它的效果与
float
相同。您也可以使用
fadeOut
而不是
hide
来达到您想要的效果


$（“.example1，.example2”）。单击（函数（）{
$（此）.淡出（“慢”）
});
.main{
边框：2件纯黑；
身高：100%；
宽度：100%；
}
.例1{
背景颜色：灰色；
宽度：50px；
高度：50px；
利润率：10px；
浮动：左；
}
.例2{
背景颜色：灰色；
宽度：50px；
高度：50px；
利润率：10px；
显示器：flex；
调整内容：灵活启动；
文本对齐：居中；
左边距：8px；
}
.第二{
边框：2件纯黑；
显示器：flex；
显示：-webkit flex；
柔性包装：包装；
-webkit柔性包装：包装；
证明内容：中心；
}

使用简单的浮动，它会慢慢隐藏：
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
12
13














现在，flex center，当你隐藏它时会产生粗糙的效果，它不像div.example1：
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
首先，您可以注意到，当您尝试从最后一行（不包括最后一行中的第一个）删除项目时，不会发生此问题。当行n的第一个元素由于两个原因突然转到行n-1时，会出现问题：

您正在尝试先删除此元素，使其宽度变为0，然后确保他能够放入前一行

您正在尝试删除任何元素，使其宽度变为0，并且您正在为下一行的第一个元素创建足够的空间以跳转到该元素上
这仅仅是由于中心对齐造成的，因为使用float、inline block或flex进行对齐没有区别。发生的情况是，在转换过程中，所有元素都移动到中心，当新元素出现时（下一行的第一个元素），所有元素都会重新放置以保持中心对齐，然后您就有了粗糙的效果

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

下面是一个片段，显示内联块和flex在左对齐时工作良好：


$（“.example2，.example1”）。单击（函数（）{
$（这个）。隐藏（“慢”）；
});
.main{
边框：2件纯黑；
身高：100%；
宽度：100%；
}
.例1{
背景颜色：灰色；
宽度：50px；
高度：50px；
利润率：10px；
文本对齐：居中；
显示：内联块；
利润率：8px；
过渡：边缘0.6s；
}
.例2{
背景颜色：灰色；
宽度：50px；
高度：50px；
利润率：10px；
文本对齐：居中；
浮动：左；
显示：内联块；
利润率：8px；
过渡：边缘0.6s；
}
.首先{
边框：2件纯黑；
显示器：flex；
柔性包装：包装；
}
.第二{
边框：2件纯黑；
显示器：flex；
柔性包装：包装；
}

内联块
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
弹性溶液
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
我的想法是：在重新排序期间淡出整个父容器。
效果不会那么粗鲁


$（“.second div”）。单击（函数（）{
$（这个）。隐藏（“慢”）；
var p=$（this.parent（）；
p、 addClass（“隐藏”）；
setTimeout（函数（）{
p、 removeClass（“隐藏”）
}, 300);
});
p{
明确：两者皆有；
}
.第二{
显示器：flex；
柔性包装：包装；
证明内容：中心；
边框：2件纯黑；
过渡时间：200ms；
}
.第二组{
背景颜色：灰色；
宽度：50px；
高度：50px；
利润率：10px；
}
.隐藏{
不透明度：0；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
我将其改为
调整内容：中心
我将其改为
调整内容：空间均匀
（在您的情况下，看起来有点类似于中心），还将函数从简单隐藏更新为
。设置动画
，然后
。隐藏
。行吗


$（“