jquery - 转换到自动位置和从自动位置转换

Question

一个元素任意放置在页面上，需要在事件发生时转换到固定位置(在我的例子中是屏幕滚动，但我在 fiddle 中使用悬停)

元素的原始位置以父元素为中心(顶部:auto 和左侧:auto)。悬停时，它应该平滑地移动到屏幕的一 Angular (左:0，上:0)然后卷土重来。相反，它只是原地跳跃，忽略了过渡属性。

我意识到没有一个浏览器支持转换为自动，但希望能找到一些解决方法。

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;
}

附言。我希望只修复 css，但使用 JQuery 的解决方案也可以。

Answer 1

您是正确的，因为现代浏览器无法转换为“自动”。不过，您可以使用 CSS 来实现您想要的效果。

在您的示例中，您需要通过更改居中

top: auto;
left: auto;

到

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

从 span 和 span:hover 中删除 top 属性并将其替换为 vertical-align。

JSFiddle Example