Pu sh братьев и сестер вне поля зрения, сохраняя при этом их ширину - PullRequest
Новая
       5

Pu sh братьев и сестер вне поля зрения, сохраняя при этом их ширину

0 голосов
/ 26 февраля 2020

При наведении курсора на элемент гибкости я теперь устанавливаю основание гибкости на 100%. При этом размеры всех братьев и сестер уменьшаются до ширины 0 (я думаю), и это показано на анимации.

Возможно ли (предпочтительно только с css) позволить этим братьям сохранить их ширину (nr из братьев и сестер является переменной, поэтому в некоторых сценариях ios будет больше столбцов, чем в примере ниже), в то время как элемент, который зависает, расширяется до 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%;
}

Ответы [ 2 ]

1 голос
/ 26 февраля 2020

Это то, чего можно достичь до сих пор. Но для того, чтобы это работало, вы должны знать количество родственных элементов, в вашем случае .day-container. Итак, из вашего jsfiddle всего 5 .day-container элементов, поэтому 100/5 = 20% должно быть flex-bases для .day-container элементов.

теперь мы переместим все элементы .day-container до того, как завис на один на 20%, когда .container завис с помощью general sibling selector '~'. Вот код: 

.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;
}
0 голосов
/ 26 февраля 2020

Это самое дальнее, что я получил, но я считаю, что для правильного центрирования вам придется нанять Javascript:

https://jsfiddle.net/xum8va4t/

это работает путем добавления второй flexbox оболочки, которая растет при наведении, как дневной контейнер

...