我试图基本上复制星巴克的移动导航，但是当你点击三行时我无法弄清楚如何让它们顺利滑动过渡。看起来他们正在使用CSS3过渡来实现这个动画，但我无法复制它。
我得到了相同的结果，但没有它动画，因为CSS3没有动画显示：inherit。
这是我的JSFiddle，任何人都可以使用像Starbucks.com在他们的mob导航中使用的CSS3立方bezier过渡来改进它吗？ （你必须调整窗口大小才能看到他们的暴徒导航）
P.S。这需要是CSS3，请不要jQuery动画： - ）
答案 0 :(得分：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)