CSS3从正常流量位置到绝对流量位置的转换

Question

我在过去遇到过几次这个问题，但从未找到一个好的解决方案。如果我有几个HTML元素是根据自然文档流定位的。举个例子，假设它是一个简单的divs堆栈。我想使用CSS3转换将其中一个元素平滑地移动到页面的固定位置（比如0,0），然后返回到它的正常位置。

问题是，如果position样式属性以前不存在，则将其更改为absolute或fixed将导致位置捕捉并忽略任何转换指令。因此，我可以想象，任何这样的转换都会涉及某种javascript组件，以确定元素当前所在的位置以及它离所需点有多远等等，然后根据它动态构建CSS样式。

不过，对于一个看似微不足道的案件来说，这感觉是一件非常艰难的事情。有更好的方法吗？

Answer 1

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

我的猜测是，当浏览器必须进行计算以在两个"不兼容"的值之间进行插值时，会有某种折衷。因此，如果您设置了height: 20px，然后想转换到height: auto，那么浏览器必须想象一下如果它有位置自动，会发生什么，计算可能会变得密集。它也没有在jQuery中实现，所以我想它破坏了一些测试，或者它只是很粗糙。

如果您在构建css时知道需要绝对位置才能始终引用窗口，那么javascript就简单多了：您只需要在偏移量和0之间切换即可。

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

http://jsfiddle.net/crUFY/

一个更健壮的解决方案包括克隆dom元素并隐藏原始元素，然后将克隆动画设置到窗口顶部。通过这种方式，可以应用位置：相对于父元素。