文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用transform:translateX在父元素中水平100%移动子元素

问如何使用transform:translateX在父元素中水平100%移动子元素
EN

Stack Overflow用户

提问于 2014-02-05 00:09:33

回答 1查看 59K关注 0票数 39

全,

我希望能够使用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 (100%的自身)，而不是所有的方式通过父对象。(你可以在jsfiddle上看到这个)：

我可以这样做：

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

这是有效的(参见here again on jsfiddle)，因为它首先移动子对象300px (父对象的全宽)，减去20px (子对象的宽度)。然而，这取决于具有固定的已知像素尺寸的父代。

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

我知道我可以使用left:0和right:0，但是left/right的动画效果比translateX (Thanks Paul Irish!)差得多。

有没有办法做到这一点？

提前谢谢。

html

css

css-transitions

css-transforms

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-02-11 16:13:09

我最初没有发布我的想法，因为它涉及到创建一个额外的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%的工作方式与预期的一样。

fiddle

请注意，正如您所说的，包装器是100%被转换的。但是，您真正想要的似乎是将元素移动到100%的宽度。要实现这一点，您必须将子项也100%平移(现在这适用于子项宽度)的相反方向。

更正:子级应该共享包装器的transition属性：

#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>

票数 36

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/21557476

复制

相似问题

问如何使用transform:translateX在父元素中水平100%移动子元素
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用transform:translateX在父元素中水平100%移动子元素EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用transform:translateX在父元素中水平100%移动子元素
EN