使用底部时如何应用整个高度过渡:0和顶部:0

Question

是否有任何选项适用于CSS属性的过渡，而无需添加height:100%？

目前，悬停按预期的是正常工作，但不幸的是没有过渡效应

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100vh;
  background-color: tomato;
  color: white;
  font-weight: 600;
  font-size: 1.5rem;
  position: relative;
  text-align: center;
}
main {
  background-color: deepskyblue;
  width: 100%;
  cursor: pointer;
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  transition: all 0.3s ease-in-out;
}
main:hover {
  top: 0;
}

<main>Hover Me</main>

Answer 1

您需要将初始值设置为顶部：

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100vh;
  background-color: tomato;
  color: white;
  font-weight: 600;
  font-size: 1.5rem;
  position: relative;
  text-align: center;
}
main {
  background-color: deepskyblue;
  width: 100%;
  cursor: pointer;
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  top:calc(100% - 40px);
  transition: all 0.3s ease-in-out;
}
main:hover {
  top: 0;
}

<main>Hover Me</main>

，如果您想保持动态性，可以尝试其他方法。

这是一个flex的想法：

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100vh;
  background-color: tomato;
  color: white;
  font-weight: 600;
  font-size: 1.5rem;
  position: relative;
  text-align: center;
  display:flex;
  flex-direction:column;
}
main {
  background-color: deepskyblue;
  width: 100%;
  cursor: pointer;
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: auto;
  flex:0;
  transition: all 0.3s ease-in-out;
}
main:hover {
  flex:1;
}

<main>Hover Me</main>