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

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>