过渡不适用于 min-height 属性答案

【问题标题】：Transition don't work with min-height property过渡不适用于 min-height 属性
【发布时间】：2022-02-13 23:08:42
【问题描述】：

我试图在盒子改变高度时进行平滑过渡，但是当我使用对我来说非常重要的最小高度时，过渡不起作用，这是我为了确保这个问题不只显示而制作的示例代码在我的页面上，但无处不在。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.main {
  width: 100%;
  height: 100vh;
  background-color: #F4EEA9;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 50%;
  min-height: 10vh;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  padding: 20px;
  transition: 0.5s;
}

.box:hover {
  height: 50vh;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <title>TEST</title>
</head>

<body>
  <div class="main">
    <div class="box">
      <h1>Hello World</h1>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate mollitia numquam est voluptas rem, voluptates dolore a rerum amet eos quae eum laudantium exercitationem quas quasi vel quia perferendis consectetur sit omnis. Placeat, nisi deleniti.
        Facere architecto, possimus veritatis quo molestiae temporibus vero vel recusandae, iusto ullam nostrum quia voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt nesciunt ratione consectetur corrupti laboriosam aliquid,
        beatae atque laborum deleniti adipisci esse blanditiis cum facere sequi voluptatibus, molestias eos sint tempore quia, quo cumque quasi. Repellat quas quaerat soluta officia voluptatum dolorum nobis a iure voluptatem id, cumque corporis voluptas
        nesciunt.</p>
    </div>
  </div>
</body>

</html>

【问题讨论】：

标签： html css

【解决方案1】：

您必须先添加初始高度值才能使其工作。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.main {
  width: 100%;
  height: 100vh;
  background-color: #F4EEA9;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 50%;
  min-height: 12vh;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  padding: 20px;
  transition: 0.5s;
  /* adjust this value */
  height: 0;
  overflow: auto;
}

.box:hover {
  height: 50vh;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <title>TEST</title>
</head>

<body>
  <div class="main">
    <div class="box">
      <h1>Hello World</h1>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate mollitia numquam est voluptas rem, voluptates dolore a rerum amet eos quae eum laudantium exercitationem quas quasi vel quia perferendis consectetur sit omnis. Placeat, nisi deleniti.
        Facere architecto, possimus veritatis quo molestiae temporibus vero vel recusandae, iusto ullam nostrum quia voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt nesciunt ratione consectetur corrupti laboriosam aliquid,
        beatae atque laborum deleniti adipisci esse blanditiis cum facere sequi voluptatibus, molestias eos sint tempore quia, quo cumque quasi. Repellat quas quaerat soluta officia voluptatum dolorum nobis a iure voluptatem id, cumque corporis voluptas
        nesciunt.</p>
    </div>
  </div>
</body>

</html>

【讨论】：

【解决方案2】：

这行得通：-

.box{
    width: 50vw;
    max-height: 10vh;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
   padding: 20px;
   transition: all .2s ease-in-out;
   overflow:hidden;
}

.box:hover{
   height: 50vh;
   max-height: 50vh;
}

您必须设置最小高度和最大高度，以便它知道往返，我也隐藏了溢出。希望这有效

【讨论】：