CSS3 Transition from normal to absolute flow position

Question

I hit this a couple of times in the past and never left with a good solution. If I have several HTML elements that are arranged according to the natural flow of documents. For example, suppose this is a simple stack of div s. I would like to use CSS3 transitions to smoothly move one of these elements to a fixed page location (say 0,0), and then return to its normal position.

The problem is that changing the attribute of the position style to absolute or fixed , if it was not there, will cause the position to be bound and ignore any transition instructions. Thus, I would suggest that any such transition would include some kind of javascript component to find out where the element is at the moment, and how far from the desired point, and so on, and then dynamically build the CSS style from this.

It seems like a lot to go through what seems trivial. Is there a better way?

Answer 1

Yes, it would be great that we can move from a static position to an absolute one, but really I don’t think it will be soon (if ever). I would be happy to be able to switch from height: px to height: auto; .

My guess is that there is some kind of compromise when the browser has to make a calculation to interpolate between two "incompatible" values. So, if you set height: 20px and then want to switch to height: auto , then the browser will have to imagine what will happen if it has the auto position, and the calculations can become intense. It is also not implemented in jQuery, so I assume it breaks some tests or just hacks.

If you archive your css, knowing that you need an absolute position to always refer to the window, then javascript becomes simpler: you just need to switch 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/

A more robust solution is to clone the dom element and hide the original, and then animate the clone at the top of the window. Thus, you can apply the position: relative to the parent elements.