Html 如何使用transform:translateX在父元素上100%水平移动子元素

全部,

我希望能够使用

translateX

在子元素的父元素上（即从左边缘到右边缘）100%地设置子元素的动画

挑战在于

translateX

中的百分比指的是元素本身，而不是父元素

例如，如果我的html如下所示：

<div id="parent">
    <div id="child">
</div>

<div class="flex-container">
  <div class="flex-spacer"></div>
  <div class="slider"></div>
</div>

这不起作用-子对象只移动20像素（自身的100%），而不是整个父对象。（您可以在上看到这一点）：

我可以这样做：

#child {
    position: absolute;
    width: 20px;
    height: 100px;
    background-color:red;
    -webkit-transform: translateX(300px) translateX(-100%);
    transform: translateX(300px) translateX(-100%);
}

这是可行的（如图所示），因为它首先将子对象移动300px（父对象的全宽）减去20px（子对象的宽度）。但是，这取决于父对象具有固定的已知像素尺寸

然而，在我的响应式设计中，我不知道父级的宽度，它会改变

我知道我可以使用

left:0

和

right:0

，但left/right的动画性能比translateX（）差得多

有办法做到这一点吗

---

提前感谢。

我最初并没有发布我的想法，因为它涉及到创建一个额外的HTML层，并期望有更好的解决方案

既然那没有发生，我就解释我的评论。我的意思是：

#parent {
    position: relative;
    width: 300px;
    height: 100px;
    background-color: black;
}
#wrapper {
    position: absolute;
    width: 100%;
    height: 100px;
    border: solid 1px green;
    transition: all 1s;
}
#wrapper:hover {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}
#child {
    position: absolute;
    width: 20px;
    height: 100px;
    background-color:red;
}
#wrapper:hover #child {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

由于包装器的宽度为父级的100%，因此将其翻译为100%的效果与预期一样

请注意，包装器正在按照您所说的100%进行翻译。但是，似乎您真正想要的是将元素移动100%的宽度。要实现这一点，还必须以相反方向平移子对象100%（现在这适用于子对象宽度）

更正：子项应共享包装的转换属性：

#parent {
    position: relative;
    width: 300px;
    height: 100px;
    background-color: black;
}
#wrapper {
    position: absolute;
    width: 100%;
    height: 100px;
    border: solid 1px green;
    transition: all 5s;
}
#wrapper:hover {
    transform: translateX(100%);
}
#child {
    position: absolute;
    width: 50px;
    height: 100px;
    background-color:red;
    transition: inherit;
}
#wrapper:hover #child {
    transform: translateX(-100%);
}

---

使用Flexbox有一个非常酷的解决方案。关键是利用flex grow特性

假设您有一些如下所示的HTML：

<div id="parent">
    <div id="child">
</div>

<div class="flex-container">
  <div class="flex-spacer"></div>
  <div class="slider"></div>
</div>

我能想到的唯一方法是在孩子周围有一个宽度为100%的包装器，并将其动画化，而不是在孩子身上child@vals设置

宽度

的动画可能会遇到与设置

左侧

动画相同的性能陷阱，否？@MurraySmith更正，边距/宽度/左侧不是GPU加速的，会影响性能。使用transforms.Vals-这是一个非常聪明的解决方案。我在子对象上添加了一个转换，因此当包装器100%向右时，子对象已100%向左移动。（见此处：）。它工作得很好。非常感谢。伟大的解决方案！但是为了避免在转换开始时尴尬地离开父级，您可能需要在子级转换中添加一个延迟，以便始终在父级内部。@gigaDIE很好的一点，我在最初的回答中没有注意到这个问题。解决了使子对象继承转换属性（请参见代码片段）很好，但仍有一个bug的问题，即当

#child

悬停时，动画将挂起。您需要指定

：在
#parent
上悬停
，以避免所有问题：我喜欢这一点问题在于它会触发油漆闪烁，因此它不是真正平滑/高效的。很遗憾，这在IE11上不起作用，因为IE11显然没有为flex-grow设置动画。当滑块的宽度可变时，这是一个很好的解决方案，例如，它是自定义文本。