css - CSS3从正常流位置转换为绝对流

我过去曾经打过几次，但从来没有放弃过一个好的解决方案。如果我有几个根据自然文档流定位的HTML元素。为了举例说明，我们假设它是一个简单的div堆栈。我想使用CSS3过渡将这些元素之一平滑地移动到页面的固定位置（例如0,0），然后再回到其正常位置。

问题在于将position样式属性更改为absolute或fixed（如果以前不存在）将导致该位置对齐并忽略任何过渡指令。这样，我可以想象任何此类转换都将涉及某种javascript组件，以找出元素当前所在的位置以及与所需位置的距离等等，然后从中动态构建CSS样式。

但是，对于一个微不足道的案例，这似乎是一件艰巨的事情。有没有更好的办法？

最佳答案

是的，我们可以从静态位置转换为绝对位置，这很酷，但是实际上我不认为它会很快出现（如果有的话）。我很高兴能够从height: px过渡到height: auto;。

我的猜测是，当浏览器必须进行计算以在两个“不兼容”值之间进行插值时，会有某种权衡。因此，如果设置height: 20px然后想要转换为height: auto，则浏览器将不得不想象如果具有位置自动并且计算会变得很密集会发生什么。它也没有在jQuery中实现，所以我猜它破坏了一些测试，或者只是普通的hacky。

如果您在构造CSS时知道需要始终使用绝对位置来始终引用窗口，那么javascript会更加简单：您只需在其offset和0，0之间切换即可。

$(".hover").on("mouseover", function(){
    $(this).css({
        top: $(this).offset().top * -1,
        left: $(this).offset().left * -1
    })
});

http://jsfiddle.net/crUFY/

一个更强大的解决方案将涉及克隆dom元素并隐藏原始元素，然后将克隆设置为动画顶部。这样，您可以应用position：相对于父元素。