过渡不适用于最小高度属性

Question

I tried to make smooth transition while box is changing height, but when i use min-height, which is very important to me, transition dont work, here is example code that i make to make sure that this problem dont show only on my page but everywhere.我试图在盒子改变高度时进行平滑过渡，但是当我使用对我来说非常重要的最小高度时，过渡不起作用，这是我制作的示例代码，以确保这个问题不会只显示在我的页面上但无处不在。

 * { 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>

Answer 1

You have to add init height value first to make it work.您必须先添加初始高度值才能使其工作。

 * { 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>

Answer 2

This works:-这有效：-

.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;
}

You have to set the min height and the max height so it know that to go to and from, also I have hidden the overflow.您必须设置最小高度和最大高度，以便它知道往返于 go，我还隐藏了溢出。 Hope this works希望这有效

过渡不适用于最小高度属性

问题描述

2 个解决方案

解决方案1
1 2022-02-11 10:36:08

解决方案2
0 2022-02-11 10:44:25

过渡不适用于最小高度属性

问题描述

2 个解决方案

解决方案1 1 2022-02-11 10:36:08

解决方案2 0 2022-02-11 10:44:25

解决方案1
1 2022-02-11 10:36:08

解决方案2
0 2022-02-11 10:44:25