苹果官网小屏状态的交互效果

Question

苹果官网小屏状态下点击展开导航栏的交互效果是如何写出来的感觉 这个动画好难写求大神知道苹果官网地址：https://www.apple.com/cn//?af...

Answer 1

1、css3 媒体查询，简单的来说，就是根据屏幕尺寸的不同，采用不同的样式，传送门
2、高度渐变，css3 transition:height 1s; 
3、最后一个ICON跑出去,也是transition:right 1s; 
4、元素波浪形出现，如果把transition:height 1s;加上的话，出现的方式应该差不多，类似于波浪，或者给子元素也加上 transition 应该会差不多