CSS - "返回"过渡效果无法正常工作

Question

我正在尝试在元素的max-height属性上添加CSS过渡效果，以使其看起来像是打开和关闭。 它在打开部分正常工作，但当我尝试关闭它时，它只是跳过了过渡效果。

我尝试将“transition：max-height .5s ease-in”应用于元素的打开状态和关闭状态，但没有任何改变。 我还尝试过渡高度属性，但也没有任何改变。

这是演示，请在屏幕宽度低于992px时尝试：http://efficience4.com/laloupe/fiche-auteur.html（单击“lire la biographie”）

有什么想法为什么会出现这种情况以及如何解决？ :)

- Marine Le Borgne

---

“Lire la biographie” 按钮在哪里？ - Greg

抱歉，刚刚修改了一下以更加精确！它会在屏幕宽度小于992像素时显示！ - Marine Le Borgne

Answer 1

感谢@Steve Ventimiglia，我删除了ease-in。但是因为max-height属性，关闭div时仍然存在延迟的问题。
我通过这个答案解决了这个问题：https://dev59.com/THA75IYBdhLWcg3wB0VP#27515933 基本上，在关闭转换中放置一个-.1s的延迟，并在打开转换中放置0s的延迟。
例如：

#toggled{
    max-height: 0px;
    transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;
}

#trigger:hover + #toggled{
    max-height: 9999px;
    transition-timing-function: cubic-bezier(0.5, 0, 1, 0); 
    transition-delay: 0s; 
}

- Marine Le Borgne

Answer 2

嗯，是ease-in导致了这个问题。

• 缓慢进入，突然结束 = ease-in。
• 突然开始，缓慢退出 = ease-out。

你可能只需要使用ease或ease-in-out。

此外，max-height应该是在指定元素内定义的CSS属性。

- Steven Ventimiglia

---

哦，是的，我犯傻了。谢谢！我选择ease-in-out。你知道为什么“out”过渡会有延迟吗？我还没有指定任何延迟... - Marine Le Borgne