从正常流动位置到绝对流动位置的CSS3过渡
我在过去的几次中遇到过这个问题，但从来没有带着好的解决方案离开。如果我有几个HTML元素，它们是根据自然的文档流定位的。为了举例，假设它是一个简单的div堆栈，我想使用CSS3转换来平滑地将其中一个元素移动到页面的固定位置(比如0,0)，然后回到它的正常位置。
问题是，如果之前没有将position样式属性更改为absolute或fixed，则会导致位置捕捉并忽略任何转换指令。因此，我可以想象，任何这样的转换都会涉及到某种javascript组件，以找出元素当前所在的位置以及距离所需位置有多远，等等，然后从这些位置动态构建CSS样式。
然而，对于一个看似微不足道的案例来说，这似乎是一个可怕的经历。有没有更好的方法？
回答 1
Stack Overflow用户
发布于 2012-01-19 20:05:42
是的，我们可以从静态位置转换到绝对位置，这将是很酷的，但现实地说，我认为它不会很快到来(如果有的话)。我很高兴能够从height: px过渡到height: auto;。
我的猜测是，当浏览器必须进行计算以在两个“不兼容”值之间进行插值时，可能存在某种权衡。因此，如果您设置了height: 20px，然后想要转换到height: auto，那么浏览器将不得不想象如果它具有位置自动会发生什么，并且计算可能会变得密集。它也不是在jQuery中实现的，所以我猜它破坏了一些测试，或者只是简单地老生常谈。
如果您在架构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元素并隐藏原始元素，然后将克隆动画显示在窗口顶部。通过这种方式，您可以应用position:相对于父元素。
https://stackoverflow.com/questions/8919622
复制相似问题
腾讯云开发者
