CSS - "Return"过渡不起作用

Question

我正在尝试在元素的最大高度属性上添加CSS过渡，使其看起来像是打开和关闭。它在打开部分工作正常，但是当我尝试关闭它时，它只是跳过过渡。

我尝试将"transition: max-height .5s ease-in"行应用于处于打开状态的元素，就像关闭状态一样，但它不会改变任何事情。我也尝试转换高度属性，但它也没有改变任何东西。

这是演示，尝试屏幕宽度低于992px：http://efficience4.com/laloupe/fiche-auteur.html(点击"lire la biographie"(

关于为什么这样做以及如何解决它的任何想法？ :)

Answer 1

感谢@Steve Ventimiglia，我删除了缓和。由于最大高度属性，我在关闭div 时仍然遇到延迟问题。
我用这个答案解决了这个问题：https://stackoverflow.com/a/27515933/7247523基本上，在结束过渡上放置 -.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; 
}

Answer 2

嗯，ease-in造成了这种情况。

• 缓慢过渡，突然结束=ease-in。
• 突然开始，缓慢过渡 = ease-out .

您可能只想使用ease或ease-in-out。

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