CSS3从正常流量位置过渡到绝对流量位置

Question

我过去曾几次打过这个，并且从未走出过一个好的解决方案。如果我有几个HTML元素根据自然文档流定位。举个例子，假设它是div s的简单堆栈。我想使用CSS3过渡来平滑地将其中一个元素移动到页面的固定位置（比如说0,0），然后再回到它的正常位置。

问题是，如果之前不存在position样式属性为absolute或fixed，则会导致该位置捕捉并忽略任何转换指令。因此，我认为任何这样的转换都会涉及某种类型的javascript组件，以确定元素当前的位置以及它与所需点的距离等等，然后从中动态构建CSS样式。

然而，对于看起来像是一件微不足道的案子来说，感觉真是太可怕了。还有更好的方法吗？

Answer 1

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

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

如果你构建你的css知道你需要绝对位置总是引用窗口，那么javascript会非常简单：你只需要在它的偏移量和0,0之间切换。

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

http://jsfiddle.net/crUFY/

更强大的解决方案包括克隆dom元素并隐藏原始元素，然后将克隆设置为窗口顶部的动画。这样您就可以应用位置：相对于父元素。