Jacksonkr Jacksonkr - 1 year ago 119
CSS Question

CSS relative to fixed position - CSS transition


I'm trying to make a div look like it's growing from where it is. To do this I'm changing the position from relative to fixed which makes the first transition start from
top:0, left:0
instead of the element's current top/left. How can I fix this to use the elements current offsets?

JS Fiddle


Note: After the first click, the code works exactly how I want it to. The very first click is the problem.

Answer Source

Hello and thanks for the fiddle,

It looks like when you first set the css here, you had transitions on your target-div which was messing things up a bit, in addition to setting your initial position inside the click function.


Setting the position of the target-div before the click function fires will position the div correctly, and applying the css without the animations on it will ensure that the target-div is in the right spot when the document loads (if you keep the animations on that target-div, even if you apply the starting css in $(document).ready it will load the page and run the animation rather than having the div start there).

I used a separate class for the animation and applied it only after the initial positioning was set (see .test class in fiddle below).


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download