Question

我正在尝试实现过渡效果。在初始过渡状态下，四个元素在水平方向上彼此隔开-使用flexbox

SELECT DISTINCT Dogs.DogName FROM Dogs, ClassResults 
WHERE (IIf([ClassResults].[ClassEntered] < 10,[Dogs.Type]<3,[Dogs.Type]>2)) ORDER BY Dogs.DogName;

在第二个过渡状态下，父容器垂直折叠，所有项目均被推向右侧。所以想像这样的情况

.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

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

我尝试通过手动检查所有4个元素相对于容器边缘的DOM左/右坐标来解决此问题，并使用以下规则将它们均匀隔开：

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

我应用第二个类，该类通过调整它们的.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

（这会将每个容器移出屏幕100％，为最右边的元素调整125px，为每个容器增加125px，以偏移先前调整的图标，依此类推，7.5％是整个页面的填充偏移，以及50px偏移滚动条）

但这是问题所在：转换* { 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); }和调整容器的大小无法实现，而使用left会使动画变得不那么动荡。但是-我不知道如何在transition: TranslateX()

中使用父容器的％尺寸

当我执行TranslateX()时-它仅将对象向左移动125像素-我无法像在TranslateX(100%)中使用百分比那样使用百分比，因为我希望将其翻译为父维度的100％，而它使用子维度。

有什么办法解决这个问题？这是一个React App，我可以尝试将父Ref的宽度传递为CSS-in-JS计算

您可以在此处看到动画：http://still-beach-13809.herokuapp.com/-滚动经过粘性容器时发生（目前在移动设备上都非常破损...）

也许最好只是调整父容器的大小并在周围保持一定间距，然后将父容器与屏幕的右边缘对齐？

编辑：尝试使用vw而不是％，但是它似乎仍然有问题

如何使用父容器宽度的百分比值来转换：translateX（）子元素？

0 个答案: