媒体查询中的转换在两个方向上均无效

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。