TranslateX 100%宽度父级内的子div
TranslateX 100%宽度父级内的子div
提问于 2016-06-02 17:02:12
我试着在我的网站上做一些jQuery有趣的事情，我的想法是，当你向下滚动页面时，父div会增长到100%的宽度，用于响应性设计，而且效果很好，同时我想要translateX子div，并且始终保持在父页面的右侧，用于动画和不同的视图大小，唯一的方法是使用float: left;和addClass of right: 0;。它能工作，但它只会向右跳。有什么办法让这个动起来吗？
我发现了这一点，但是它不能解决我的问题，因为父元素具有精确的像素宽度：
如何使用transform:translateX将子元素水平100%移动到父元素
<div class = "parent">
<div class = "child"></div>
</div>CSS
.parent {
position: relative;
width: 180px;
height: 180px;
transition: all ease-in-out 300ms;
}
.child {
position: absolute;
width: 180px;
height: 180px;
float: left;
transition: all ease-in-out 300ms;
}
.moveParent {
width: 100%;
}
.moveChild {
right: 0px;
}jQuery
$(window).scroll(function(){
var wScroll = $(this).scrollTop();
if(wScroll > $('.parent').offset().top){
$('.parent').addClass('moveParent');
$('child').addClass('moveChild');
}
});回答 2
Stack Overflow用户
回答已采纳
发布于 2016-06-02 17:24:59
CSS转换必须将从更改为其他东西，所以如果您只说right: 0;，它就无法工作。要使动画正常工作，您需要设置一个默认值。
将css改为如下所示：
CSS
.child {
position: absolute;
width: 180px;
height: 180px;
right: calc(100% - 180px);
transition: all ease-in-out 300ms;
}这将使div与左对齐，最初通过计算右: 100% -您的div的宽度(180‘s)。然后在悬停之后，它将使用right: 0;向右移动。
Stack Overflow用户
发布于 2016-06-02 17:24:14
Float不是CSS中的一个可动画属性，所以即使您将转换设置为"all"，只要添加了类，效果就会适用，并且不会有动画效果。阅读更多
您可能需要尝试从left: 0开始，并对其进行动画化。
这是一个有用的小提琴：JSFiddle
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37597988
复制相关文章
相似问题
腾讯云开发者
