如何使用transform：translateX来横向移动子元素100％跨越父级

问题描述

全部，

我想能够使用 translateX 为子元素设置动画100％

挑战是 translateX 中的百分比

所以，例如，如果我的html看起来像这样：

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

我这样的CSS（省略了供应商前缀）：

  #parent {
 position：relative; 
 width：300px; 
 height：100px; 
 background-color：black; 
} 
 #child {
 position：absolute; 
 width：20px; 
 height：100px; 
 background-color：red; 
 transform：translateX（100％）; 
} 
  

这不起作用 - 孩子只移动20px ），不是所有的方式跨越父。 （您可以在），因为它首先移动子300px（父的全宽），减去20px儿童）。但是，这取决于父项具有固定的已知像素维度。

然而，在我的响应式设计 - 我不知道父的宽度， p>

我知道我可以使用 left：0 和 right：0 ，但左/右的动画性能比translateX差很多（

请注意，包装器正在翻译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％）; 
} 
  

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

All,

I'd like to be able to use translateX to animate a child element 100% of the way across it's parent (i.e., from the left edge to the right edge).

The challenge is that percentages in translateX refer to the element itself, not the parent.

So, for example, if my html looks like this:

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

And my CSS like this (vendor-prefixes omitted):

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

This doesn't work - the child only moves 20px (100% of itself), not all the way across the parent. (You can see this on jsfiddle):

I can do this:

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

This works (seen here again on jsfiddle), because it first moves the child 300px (the full width of the parent), minus 20px (the width of the child). However, this depends on the parent having a fixed, known pixel dimension.

However, in my responsive design - I don't know the width of the parent, and it will change.

I know that I can use left:0 and right:0, but the animation performance of left/right is much worse than translateX (Thanks Paul Irish!).

Is there a way to do this?

Thanks in advance.

解决方案

I didn't post my idea originally, because it involves creating an additional HTML layer, and expected better solutions to come.

Since that hasn't happened, I explain my comment. What I meant was this:

#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%);
}

Since the wrapper is 100% width of the parent, translating it 100% works as expected.

fiddle

Note that the wrapper is being translated 100% as you stated. However, seems that what you really want is to move the element 100% - width. To achieve this, you have to translate the child also 100% (now this applies to the child width) in the opposite direction.

Correction: the child should share the transition property of the wrapper:

#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%);
}

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

这篇关于如何使用transform：translateX来横向移动子元素100％跨越父级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！