三次Bezier过渡星巴克移动导航

Question

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

我得到了相同的结果，但是没有动画效果，因为CSS3没有动画display: inherit。

这是我的JSFiddle，有没有人可以像Starbucks.com在他们的暴徒导航中使用的那样，使用CSS3立方贝塞尔变换来改进它？(你必须调整你的窗口大小，才能明显看到他们的暴徒导航)

附注：这需要是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)