Как использовать процентное значение ширины родительского контейнера для преобразования: translateX () дочерний элемент? - PullRequest
Новая
       34

Как использовать процентное значение ширины родительского контейнера для преобразования: translateX () дочерний элемент?

0 голосов
/ 16 сентября 2018

Я пытаюсь реализовать эффект перехода. В начальном переходном состоянии четыре элемента расположены горизонтально на расстоянии друг от друга - с помощью flexbox 

.parent {
  display: flex
  justify-content: space-between
  align-items: center
  padding-left: 7.5%
  padding-right: 7.5%
}

Во втором переходном состоянии родительский контейнер сворачивается вертикально, и все элементы выдвигаются к правому краю. Итак, представьте себе ситуацию, подобную этой 

/////////////////////

   xx   xx  xx  xx
   xx   xx  xx  xx

/////////////////////

переход к: 

/////////////////////
              xxxx
/////////////////////

Я попытался решить эту проблему, вручную проверив все 4 элемента на предмет их левой / правой координат DOM относительно краев контейнера и равномерно распределил их по следующим правилам: 

.abs-ico-co1 {
    left: 7.194%;
}
.abs-ico-co2 {
    left: 30.325%;
}
.abs-ico-co3 {
    left: 58.55143%;
}
.abs-ico-co4 {
    left: 82.09201%;
}

Я применяю второй класс, который анимирует все объекты в правой части экрана, регулируя их left проценты, которые ссылаются на процент от общей ширины родительского контейнера: 

* {
  width: 125px
  transition: 0.8s left ease-out
}
.co1-move {
  left: calc(100% - 500px - 7.5% + 50px);
}
.co2-move {
  left: calc(100% - 375px - 7.5% + 50px);
}
.co3-move {
  left: calc(100% - 250px - 7.5% + 50px);
}
.co4-move {
  left: calc(100% - 125px - 7.5% + 50px);
}

(Это перемещает каждый контейнер на 100% за пределы экрана, настраивает 125px для самого правого элемента, добавляет 125px для каждого последующего, чтобы сместить ранее настроенный значок и т. Д., 7.5% - это смещение отступа всей страницы, а 50px смещает полосу прокрутки)

Но здесь есть проблема: переход left и изменение размера контейнера не производительны, а использование transition: TranslateX() сделает анимацию немного менее изменчивой. Однако - я не могу понять, как использовать% измерения родительского контейнера в TranslateX()

Когда я делаю TranslateX(100%) - он перемещает объект влево только на 125 пикселей - я не могу использовать проценты так же, как я использую их для left, потому что я ожидаю, что он будет переведен на 100% родительское измерение, в то время как оно использует дочернее.

Есть ли способ решить это? Это приложение React, я могу попытаться передать ширину родительского Ref как расчет CSS-in-JS

Вы можете увидеть анимацию здесь: http://still -beach-13809.herokuapp.com / - Происходит, когда вы прокручиваете липкий контейнер (сейчас все очень сломано на мобильном телефоне ...)

Может быть, было бы лучше просто изменить размер родительского контейнера и оставить интервал с пробелом, и просто выровнять родительский элемент по правому краю экрана? `

Редактировать: попытался использовать vw вместо%, но он все еще кажется глючным

...