过渡到和来自位置Auto

Question

一个元素被任意放置在页面上,并且需要转换到事件上的固定位置(在我的情况下,屏幕滚动,但我在小提琴中使用悬停)

元素的原始位置以父对象为中心(top:auto和left:auto).在悬停时,它应该平滑地移动到屏幕的角落(左:0,顶部:0),然后回来.相反,它只是跳转到位,忽略了过渡属性.

我意识到没有一个浏览器支持转换到auto,但希望找到一些解决方法.

小提琴

<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.我希望只修复css,但是使用JQuery的解决方案也可以.

Answer 1

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

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

top: auto;
left: auto;

到

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

从span 和span:hover 中删除top 属性，并用vertical-align 替换它。

JSFiddle 示例