mobile - 使用三次贝塞尔曲线过渡的星巴克移动导航

Question

我试图基本上复制星巴克的移动导航，但我不知道如何在单击三行时获得平滑的幻灯片过渡。看起来他们正在使用 CSS3 过渡来实现这个动画，但我无法复制它。

我得到了相同的结果，但没有动画，因为 CSS3 没有动画显示：继承。

这是我的 JSFiddle，任何人都可以通过像 Starbucks.com 在他们的暴民导航中使用的 CSS3 三次贝塞尔过渡来改进它吗？（你必须调整你的窗口大小才能看到他们的暴民导航）

ps 这需要是 CSS3，请不要使用 jQuery 动画 :-)

http://jsfiddle.net/zQxNd/2/

Answer 1

我遇到的最佳方法是将隐藏菜单的默认样式设置为：

display:block;
overflow:hidden;
height:0;

然后在你的 .open 中设置元素的高度：

height: 200px;

我编辑了你的小提琴来展示：http: //jsfiddle.net/zQxNd/3/

此外，最好编写一个快速的 jQuery 函数来通过 jQuery 设置高度 - 这并不理想，但它是我使用我们拥有的工具找到的最佳解决方案。

编辑：为了获得确切的动画速度，你可以玩这个很棒的小应用程序：http ://cubic-bezier.com/

一旦你把时间安排下来，你可以ease-in用这样的东西替换你的过渡声明：

transition: all 1s cubic-bezier(.17,.67,.83,.67)