Move to and from Auto

Question

The element is arbitrarily placed on the page and should go to a fixed position in the event (scrolling the screen in my case, but im using hovering in the fiddle)

The initial position of the element is centered with the parent (top: automatic and left: automatic). When hovering, it should smoothly move to the corner of the screen (left: 0, top: 0), and then return. Instead, he simply jumps into place, ignoring the transition property.

I understand that none of the browsers supports the transition to auto, but I hoped to find some work for this.

fiddle

<div> <span>test</span> </div> div { border: 1px solid red; text-align: center; height: 100px; margin: 15px; } span { display: inline-block; width: 50px; height: 50px; background: blue; transition: all 1s; position: fixed; left: auto; top: auto; } div:hover span { left: 0; top: 0; } 

PS. I hope to fix the css, but a solution with jQuery will work.

Answer 1

You are right that modern browsers cannot switch to "auto". You can use CSS to achieve what you are looking for.

In your example, you need to center by changing

 top: auto; left: auto; 

to

 vertical-align: top; left: calc(50% - 25px); 

Remove the top property from the range and range: hover and replace it with vertical alignment.

JSFiddle example

Answer 2

Why don't you give specific top and left ? you have span{position: fixed} , so in this case you always know about your top , right , bottom , left (relative to the viewport).

try with:

 div { border: 1px solid red; text-align: center; height: 100px; margin: 15px; } span { display: inline-block; width: 50px; height: 50px; background: blue; transition: all 1s; position: fixed; left: 50%; margin-left: -25px; /*or transform: translateX(-50%) if you don't know the width of span*/ top: 16px; } div:hover span { left: 0; top: 0; margin-left: 0; /*or transform: none if you don't know the width of span*/ } 

 <div> <span>test</span> </div> 

You can change top left as you, which will achieve what you want.

Here's a jsfiddle example to play with