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

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 应该会差不多

Answer 2

把网页下载到本地再慢慢研究

Answer 3

我有写过，但是没办法一模一样，有点点像的感觉吧。我跟你说下，代码太多了，整理不出来。
1、一般下拉的导航我们都用li是吧，然后我用到的这两个代码：

-webkit-transition:height .35s cubic-bezier(0.645, 0.045, 0.355, 1) 50ms;
-webkit-transform: scale(1.1) translateY(-24px);

默认是scale(1.1)，然后有个偏移。
2、点击事件后，把他们还原回去：

-webkit-transform: scale(1) translateY(0);

3、给每个li都加延迟动画

li:nth-child(1){-webkit-transition-delay:50ms,50ms;transition-delay:50ms,50ms}
li:nth-child(2){-webkit-transition-delay:.1s,.1s;transition-delay:.1s,.1s}
li:nth-child(3){-webkit-transition-delay:150ms,150ms;transition-delay:150ms,150ms}
li:nth-child(4){-webkit-transition-delay:.2s,.2s;transition-delay:.2s,.2s}
li:nth-child(5){-webkit-transition-delay:250ms,250ms;transition-delay:250ms,250ms}

Answer 4

确实是不好写啊