CSS过渡最大高度回到0不起作用 [英] css transition max-height back to 0 not working

问题描述

我有一个简单的div，它的height和max-height设置为10px。当我将鼠标悬停在它上面时，它应该扩展到div的整个高度，当我离开它时应该收缩到10px。

I have a simple div which has height and max-height set to 10px. When I hover over it, it should expand to the full height of div and when I leave it should shrink back to 10px.

但是当我将鼠标悬停时，下面的代码不会顺利过渡到0。

But the when I unhover, the code below won't transit smoothly back to 0.

HTML

<div class="animate">
   Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory  ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
</div>

CSS

.animate{
  font-size:20px;
  height : 10px;
  max-height:10px;
  width: 100px;
  overflow:hidden;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.animate:hover{
  height:auto;
  max-height:1000px;
}

https://jsfiddle.net/3hfxg6he/2/

推荐答案

从代码中删除 height：10px; 。高优先级将高度设置为10px并进行隐藏。这就是为什么动画无法正常工作的原因。有关最大高度属性的更多详细信息，请遵循此链接

Remove height:10px; from your code. it ll makes height 10px in high priority and makes overflow-hidden. thats why the animation is not working. for more details about max-height property follow this link

.animate{
  font-size:20px;
  max-height:10px;
  width: 100px;
  overflow:hidden;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.animate:hover{
  height:auto;
  max-height:1000px;
}

<div class="animate">
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory  ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
</div>

这篇关于CSS过渡最大高度回到0不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！