转换到和从位置自动 [英] Transition to and from position Auto

问题描述

元素被任意放置在页面上，并且需要转换到事件的固定位置（在我的情况下，屏幕滚动，但是im使用鼠标悬停）

元素的原始位置以父元素（top：auto和left：auto）为中心。在悬停时，应该平滑地移动到屏幕的角落（左：0，顶部：0），然后回来。

我意识到没有一个浏览器支持转换到汽车，但希望找到一些工作，为这个。

小提琴

 < div> 
< span>测试< / 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。我希望一个CSS只有修复，但一个解决方案与JQuery也会工作。

解决方案

您是正确的，因为现代浏览器无法过渡到自动。

在您的示例中，您需要更改

  top：auto; 
 left：auto; 
  

到

  vertical-align：top; 
 left：calc（50％ -  25px）; 
 

从span和span：中移除top属性，然后将其替换为vertical-align。 p>



JSFiddle示例

An element is arbitrarily placed on a page, and needs to transition to a fixed position on event (screen scroll in my case, but im using hover in the fiddle)

The original position of the element is centered withing a parent (top: auto and left: auto). On hover, it's supposed to smoothly move to the corner of the screen (left: 0, top: 0) and then comeback. Instead, it just jumps in place, ignoring the transition property.

I realize that none of the browsers support transition to auto, but was hoping to find some work around 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'm hoping for a css only fix, but a solution with JQuery would work as well.

解决方案

You are correct in that modern browsers are unable to transition to 'auto'. You can use CSS to achieve what you're looking for though.

In your example, you'll need to center by changing

top: auto;
left: auto;

to

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

Remove the top property from the span and span:hover and replace it with vertical-align.

JSFiddle Example

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