CSS3从正常流量位置转换到绝对位置 [英] CSS3 Transition from normal flow position to absolute

问题描述

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

I've hit this one a couple of times in the past and never walked away with a good solution. If I have several HTML elements that are positioned according to natural document flow. For the sake of example, let's say it's a simple stack of divs. I would like to use CSS3 transitions to smoothly move one of those elements to a fixed location of the page (say 0,0) and then back to it's normal position.

问题是将位置改为 absolute 或 fixed （如果不存在）将导致位置捕捉并忽略任何转换指令。因此，我想象任何这样的过渡将涉及某种JavaScript组件，以确定元素当前是什么，以及与它的期望点有多远等等，然后动态构建CSS样式。

The problem is that changing the position style attribute to absolute or fixed if it wasn't there before will cause the position to snap and ignore any transition instructions. As such I would imagine that any such transition would involve some sort of javascript component to figure out where the element currently is and how far off from the desired point it is and so on and then dynamically build the CSS style from that.

这种感觉像一个可怕的很多，但是看起来像一个琐碎的case。有更好的方法吗？

That feels like an awful lot to go through for what seems like a trivial-ish case, though. Is there a better way?

推荐答案

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

Yes, it would be cool that we could be able to transition from position static to absolute, but realistically I don't think it's coming soon (if ever). I'd be happy with just being able to transition from height: px to height: auto;.

我的猜测是，当浏览器必须进行计算以在两个不兼容值之间插值时，存在某种折衷。因此，如果您设置 height：20px ，然后要转换到 height：auto ，则浏览器必须想象如果它有位置auto会发生什么，计算可能会加密。它不是在jQuery中实现的，所以我想它打破了一些测试，或者它只是简单的黑客。

My guess is that there is some sort of tradeoff when the browser has to make a calculation to interpolate between two 'incompatible' values. So, if you set height: 20px and then want to transition to height: auto, then the browser would have to imagine what would happend if it had position auto and the calculations could get intensive. It's not implemented in jQuery either, so I guess it breaks some tests, or it's just plain hacky.

如果你的架构你的CSS知道你将需要位置绝对总是参考窗口，那么javascript是非常简单：你只需要在其偏移量和0,0之间切换。

If you architect your css knowing that you will need position absolute to always refer to the window, then the javascript is drastically more simple: you just have to toggle between its offset and 0, 0.

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

http://jsfiddle.net/crUFY/

一个更强大的解决方案包括克隆dom元素和隐藏原始文件，然后将克隆动画窗口的顶部。这样你可以应用位置：相对于父元素。

A more robust solution would involve cloning the dom element and hiding the original, then animating the clone to the top of the window. This way you can apply position: relative to the parent elements.

这篇关于CSS3从正常流量位置转换到绝对位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！