Question

我试图在我的网站上创建一些jQuery的乐趣，我的想法是，当你向下滚动页面时，父div增长到100％宽度，以便响应式设计，并且工作得很好，同时我希望translateX子div并始终位于动画父级的右边缘，并且对于不同的视口大小，我只能通过float: left;和addClass来完成这项工作right: 0;。它有效，但它只是跳到右边。有没有办法动画这个？

我发现了这个，但它并没有解决我的问题，因为父级有一个确切的像素宽度：

How to use transform:translateX to move a child element horizontally 100% across the parent

<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');
    }
});

Answer 1

Float不是CSS中的可动画属性，因此即使您将过渡设置为＆＃34; all＆＃34;，只要您添加该类，效果就会申请，它不会动画。 Read More

您可能希望尝试从left: 0开始并为其设置动画。

这是一个工作小提琴： JSFiddle

Answer 2

CSS过渡必须将从 更改为其他内容，因此如果您只是说sqlite3_close(db)，它就无法工作。为了使动画正常工作，您需要设置默认的正确值。
将您的CSS改为：

<强> CSS

right: 0;

这将首先通过计算右对齐div：100％ - 你的div宽度（180px）。然后在悬停后，它将使用.child { position: absolute; width: 180px; height: 180px; right: calc(100% - 180px); transition: all ease-in-out 300ms; }动画到右侧。

JSFiddle

在100％宽度的父级内部翻译一个子div

2 个答案: