我试图基本上复制 Starbucks 移动导航，但我不知道如何在单击三行时实现平滑的幻灯片过渡。看起来他们正在使用 CSS3 转换来实现此动画，但我无法复制它。
我得到了相同的结果，但没有动画，因为 CSS3 不动画显示:继承。
这是我的 JSFiddle，任何人都可以像 Starbucks.com 在他们的暴徒导航中使用的那样使用 CSS3 立方体贝塞尔过渡来改进它吗？ (你必须调整窗口大小才能清楚地看到他们的生物导航)
附注这需要是 CSS3，请不要使用 jQuery 动画 :-)
最佳答案
我遇到的最佳方法是将隐藏菜单的默认样式设置为:
display:block;
overflow:hidden;
height:0;
然后在您的 .open 中设置元素的高度:
height: 200px;
我编辑了你的 fiddle 以显示:http://jsfiddle.net/zQxNd/3/
此外，最好编写一个快速的 jQuery 函数来通过 jQuery 设置高度——这并不理想，但它是我用我们现有的工具找到的最佳解决方案。
编辑:为了获得动画的准确速度，您可以使用这个很棒的小应用程序:http://cubic-bezier.com/
一旦你掌握了时间，你可以用这样的东西替换你在转换声明中的ease-in:
transition: all 1s cubic-bezier(.17,.67,.83,.67)
关于mobile - 具有三次贝塞尔过渡的星巴克移动导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10507505/