如何消除Css3上的延迟使用最大高度过渡的滑移过渡 [英] How to Remove Delay on Css3 Slide out transition which uses max-height transition

问题描述

我在滑入和滑出面板时遇到了过渡问题。

I'm having an issue with a transition I'm using to slide a panel in and out.

请查看以下jsbin http://jsbin.com/uvejuj/1/

Please take a look at the following jsbin http://jsbin.com/uvejuj/1/

请注意，当我第一次单击切换按钮时，过渡会立即发生。

Notice that when i click the toggle button the first time the transition occurs immediately.

但是，如果我再次单击按钮以关闭，过渡会延迟时间

However if i click the button again to close then the transition delays the amount of time of the transition before it executes.

是什么原因导致结算延迟，我该如何解决？

What is causing the delay on close out and how can i get rid of it?

谢谢

推荐答案

这是因为您要设置的动画最大高度在0到1000像素之间，但是您的内容只有大约120像素高。延迟是动画发生在您看不到的880像素上。

It's because you're animating between 0 and 1000px max height but your content is only about 120px high. The delay is the animation happening on the 880 pixels that you can't see.

可以将max-height设置为内容的已知高度（如果知道，例如： http://jsbin.com/onihik/1/ ）或尝试其他方法。也许像 https://stackoverflow.com/a/6486082/2619379

Either set max-height to the known height of your content (if you know it - example: http://jsbin.com/onihik/1/) or try a different method. Maybe something like https://stackoverflow.com/a/6486082/2619379

这篇关于如何消除Css3上的延迟使用最大高度过渡的滑移过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！