在保持宽度的同时将兄弟姐妹推到视野之外答案

【问题标题】：Push siblings out of view while keeping their width在保持宽度的同时将兄弟姐妹推到视野之外
【发布时间】：2020-02-26 11:06:23
【问题描述】：

当悬停一个 flex 元素时，我现在将 flex-basis 设置为 100%。在执行此操作时，所有兄弟姐妹的宽度都会调整为 0（我认为），这会在动画中显示。

是否有可能（最好只使用 css）让这些兄弟姐妹保持它们的宽度（兄弟姐妹的 nr 是可变的，所以在某些情况下会有比下面的示例更多的列）而悬停的元素扩展为 100%宽度？这样看起来好像它们是从容器中推出的，而不是调整为 0 的宽度。

现在的工作方式如下：https://jsfiddle.net/luffyyyyy/y8p9g2bs/8/

.container {
    width: 100vw;
    height: 60vh;
    display: flex;
    align-items: stretch;
    overflow: hidden;
}

.day-container {
    flex: 1; 
    display: flex;
    flex-direction: column;
    transition: flex-basis 1000ms ease-in-out;
}

.day-container:hover {
    flex-basis: 100%;
}

【问题讨论】：

你试过transform:scale() ??。尝试将 flex-basis 替换为 ` -webkit-transform: scale(9, 1);`
嗨 Akhil，我之前确实试过这个。这使得悬停的日间容器重叠/忽略它的兄弟姐妹，所以它们留在原处。不是我想要的效果。
@awsome-o 您需要将transition:.5s 添加到.day-container 和.day-container:hover{} 以获得平滑的效果。你试过了吗
@AkhilAravind 这不是关于效果是否平滑，而是/足够平滑。当您查看小提琴时，您会在悬停其中一列时看到其他列将折叠（调整为 0px 的宽度）。现在我想要的是其他列不会折叠，而是在保持宽度的同时移出视野。希望这是有道理的。
@Awesom-o 您是否希望其他元素以相同的宽度保持在相同的位置？或者您想将它们移出其他位置但宽度相同的视图？

标签： css flexbox transition

【解决方案1】：

这是迄今为止可以实现的。但要使其工作，您必须知道兄弟元素的数量，在您的情况下为.day-container。因此，从您的 jsfiddle 共有 5 个 .day-container 元素，因此 100/5 = 20% 应该是 flex-bases 的 .day-container 元素。

现在，当 .container 在 general sibling selector '~' 的帮助下悬停时，我们会将悬停之前的所有 .day-container 元素向左移动 20%。代码如下：

.container:hover .day-container:not(:hover) {
  margin-left: -20%;
}

.container:hover .day-container:hover ~ .day-container {
  margin-left: 0;
}

最后，将transition 更改为all 以使一切顺利进行。
这是最终代码的样子：

body {
  margin: 0;
  padding: 0;
}

.container {
  width: 100vw;
  height: 60vh;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.day-container {
  flex: 1 0 20%;
  display: flex;
  flex-direction: column;
  transition: all 1000ms ease-in-out;
}

.day-container:hover {
  flex-basis: 100%;
}

.item.small {
  flex: 1;
  background-color: royalblue;
}

.item.medium {
  flex: 2;
  background-color: rebeccapurple;
}
.item.big {
  flex: 3;
  background-color: goldenrod;
}

.container:hover .day-container:not(:hover) {
  margin-left: -20%;
}

.container:hover .day-container:hover ~ .day-container {
  margin-left: 0;
}

【讨论】：

嗯，当我有时间的时候，我需要更多地尝试这个想法。您发布它的方式不起作用，似乎只有悬停的日间容器左侧的第一个兄弟保持他的宽度......其余的仍然崩溃。见：jsfiddle.net/luffyyyyy/y8p9g2bs/18
嗨，我刚刚意识到我在之前的代码中犯了一个错误。它应该是general sibling selector 而不是adjacent selector。请现在检查这是否符合您的要求。我希望它能解决你的问题:)
只是想去玩一下，但你是这样搞定的 :) 谢谢！
乐于助人:)

【解决方案2】：

这是我得到的最远距离，但我相信要正确居中，您必须使用 Javascript：

https://jsfiddle.net/xum8va4t/

它通过添加第二个 flexbox 包装器来工作，该包装器在悬停时会像日容器一样增长

【讨论】：