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

我在过去几次碰到过这个，从来没有走过一个很好的解决方案。如果我有几个根据自然文档流定位的HTML元素。举例来说，我们假设它是一个简单的div s堆栈。我想使用CSS3转换来平滑地将这些元素之一移动到页面的固定位置（比如0,0），然后返回到正常位置。CSS3从正常的流动位置到绝对的过渡

问题是如果样式属性改为absolute或fixed（如果它之前不存在）将导致位置突然变化并忽略任何转换指令。因此，我会想象任何这样的转换都会涉及某种javascript组件，以找出当前元素的位置以及距离期望位置有多远等，然后从中动态构建CSS样式。但是，这似乎是一个可怕的事情，通过什么似乎是一个微不足道的情况下，虽然。有没有更好的办法？

来源

2012-01-19 Toji

是的，我们可以从静态位置转换到绝对位置，但实际上我认为它不会很快（如果有的话）。我很高兴能够从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元素并隐藏原始文件，然后将克隆动画化到窗口的顶部。这样你可以应用位置：相对于父元素。

来源

2012-01-19 12:05:42 Duopixel

是的，我想这将是关于它的大小。好吧，开发者可以做梦，对吧？感谢小提琴，顺便说一句！总是很高兴看到概念证明。 – Toji 2012-01-19 16:25:13

“我很高兴能够从高度：px转换为高度：auto ;.”在某些情况下，最大高度转换可以很好地替代它。例如。从最大高度：0px过渡到最大高度：9999px，在过渡结束时，目标元素将以高度自动结束。 – 2013-12-04 10:55:41

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

回答

相关问题