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中删除top属性：悬停并将其替换为vertical-align。

JSFiddle Example

Answer 2

为什么不设置特定的top和left？你有span{position: fixed}所以在这种情况下，你总是知道你的top，right，bottom，left（相对于视口）。

所以请尝试：

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>

您可以更改top left，以达到您想要的效果。

Here a jsfiddle example to play with

过渡到和来自位置Auto

2 个答案: