媒体查询中的转换在两个方向上都不起作用

Question

我是CSS过渡的新手，并试图弄清楚它如何与媒体查询一起工作。

我创建了一个基本示例，其中希望我的按钮以平滑过渡的方式上升并回到中心，但它只以一种方式工作：当它回到中心时不起作用。

这是真实的例子，其中可以使用鼠标调整结果窗口的宽度以查看问题： https://jsfiddle.net/hgaoe3zc/

这是我的过渡 CSS：

body {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
button {
top: calc(50% - 30px);
transition: top 0.5s ease-in-out;
}
@media only screen and (max-width: 500px) {
button {
position: absolute;
top: 6rem;
}
}

任何想法都会非常感激：(

Answer 1

您需要在两种状态下设置position: absolute。

https://jsfiddle.net/yo4fedq6/

body {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
button {
top: calc(50% - 30px);
position: absolute; // HERE
transition: top 0.5s ease-in-out;
}
@media only screen and (max-width: 500px) {
button {
top: 6rem;
}
}

<button>Button</button>