CSS过渡仅生效于进入动画，退出时无效果？求解决方案

你的代码里有两个关键问题导致鼠标离开时没有过渡效果：

• 选择器错误：.collapsed-content :hover中间的空格会让CSS选中.collapsed-content下的子元素，而不是元素本身的hover状态，应该改成.collapsed-content:hover（去掉空格）。
• 过渡属性无需在hover状态重复定义，只需要在初始样式中声明一次，这样进入和离开hover状态时都会触发过渡动画。

另外还要补充overflow: hidden属性，否则当max-height小于内容高度时，超出部分会直接显示，过渡效果无法正常呈现。

修正后的完整代码如下：

CSS代码 #

.collapsed-content {
  max-height: 3rem;
  transition: max-height 1.75s ease-in;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 必须添加，隐藏超出max-height的内容 */
}

.collapsed-content:hover {
  max-height: 300rem;
}

HTML代码 #

<div className='collapsed-content'>
  <p> Content </p>
  <div>
    <p> More content to reveal here </p>
  </div>
</div>

原理说明：初始状态下定义了max-height和transition属性，当鼠标悬停时修改max-height触发展开动画；鼠标离开时，元素会自动恢复到初始的max-height值，由于过渡属性已经在初始样式中存在，所以会平滑执行收起动画。

内容的提问来源于stack exchange，提问作者Jack