Html css变换重新定位子div flexbox

拨弄

如上面的gif动画所示，我在选择图标后有轻微的抖动。图标以固定宽度放置在容器div中，并使用flexbox均匀隔开。当用户进行选择时，未选择的图标将缩小到.1，然后转到显示：无。但是，剩余的图标将以抖动运动重新定位。如何使此重新定位平滑？每个图标都有一个1秒的转换。并且包含的div在宽度上也有一个转换，这样我就可以自动设置宽度。下面是一些代码：

css:

html:

在他的帮助下，我终于想出了一个办法

我觉得可能有比这个更好的解决方案，但也许这个就可以了

如果您需要固定大小的内容，您可以使用我创建的内容作为固定大小的以父级为中心的内容的包装

.icon
{
    //...
    flex-grow: 1;
}

.icon.hidden
{
    flex-grow: 0.00001; //setting to 0 breaks the transition
    width: 0px;
}

请注意，在动画结束之前，不能将div设置为display:none。

在我的帮助下，我想出了一个

我觉得可能有比这个更好的解决方案，但也许这个就可以了

如果您需要固定大小的内容，您可以使用我创建的内容作为固定大小的以父级为中心的内容的包装

.icon
{
    //...
    flex-grow: 1;
}

.icon.hidden
{
    flex-grow: 0.00001; //setting to 0 breaks the transition
    width: 0px;
}

---

请注意，在动画结束之前，不能将div设置为display:none。

尝试使用下面的代码，它可能会对您有所帮助

$document.readyfunction{ $'.icon'。单击函数{ $'.icon'.notthis.css'display'，'none'； }; }; .集装箱{ 高度：200px； 宽度：500px； 显示器：flex； 弯曲方向：行； 柔性包装：无包装； 证明内容：周围的空间； } .图标{ 宽度：50px； 高度：50px； 过渡：全.5s立方贝塞尔0.19,1,0.22,1； 边界半径：50px； 盒影：0px 1px 2px 8888888； 文本对齐：居中； 光标：指针； } .I信息{ 字体大小：20px； 填充：15px； 颜色：888888； } div.icon：悬停{ 盒影：0px 5px 88888； } div.icon>span{ 显示：无； 填充顶部：10px； 颜色：888888； } div.icon：悬停范围{ 显示：块； } 阅读 写 音乐 电影

---

试试下面的代码，它可能会帮助你

$document.readyfunction{ $'.icon'。单击函数{ $'.icon'.notthis.css'display'，'none'； }; }; .集装箱{ 高度：200px； 宽度：500px； 显示器：flex； 弯曲方向：行； 柔性包装：无包装； 证明内容：周围的空间； } .图标{ 宽度：50px； 高度：50px； 过渡：全.5s立方贝塞尔0.19,1,0.22,1； 边界半径：50px； 盒影：0px 1px 2px 8888888； 文本对齐：居中； 光标：指针； } .I信息{ 字体大小：20px； 填充：15px； 颜色：888888； } div.icon：悬停{ 盒影：0px 5px 88888； } div.icon>span{ 显示：无； 填充顶部：10px； 颜色：888888； } div.icon：悬停范围{ 显示：块； } 阅读 写 音乐 电影

---

你能提供一把小提琴吗？我加了一把小提琴，上面有例子。你能提供一把小提琴吗？我加了一把小提琴，上面有例子

.icon
{
    //...
    flex-grow: 1;
}

.icon.hidden
{
    flex-grow: 0.00001; //setting to 0 breaks the transition
    width: 0px;
}