分析小米商城的导航栏的布局及其动画实现

首先看看小米商城的导航栏，如图：

通过实际测试可以知道，服务和社区不属于下拉菜单，除了这两个，剩下的全是下拉菜单，想成了一个下拉菜单组，一旦鼠标进入下拉菜单组，那么就会有下拉效果，通过也有过渡效果，所以肯定有 transition'属性，目测时间为0.3s左右，一旦鼠标离开下拉菜单组，那么下拉菜单就会收起来，这个比较直观，还有就是下拉菜单选项之间的切换几乎是没有过度效果的。

先来看看怎么布局的，因为服务和社区不属于下拉菜单组，因此可以单独提出来，其他的

小米       手机        红米      电视     笔记本     家电      新品    路由器      智能硬件

可以放到一个下拉菜单组里边

因此是这样的：

<div class="container">

         <ul>  ----下拉菜单组---- 

                  <li>     ----下拉菜单选项----    小米       手机        红米      电视     笔记本     家电      新品    路由器      智能硬件     </li>

         </ul>

         <div  class="pt-menu">     服务      </div>

         <div  class="pt-menu">      社区     </div>

</div>

建议使用flex布局

然后分析动画实现，综合之前的分析，如下：

<ul>  下拉菜单组     未触发：height：0        触发时：height：250px        transition：0.3s ease     

         <li>     ----下拉菜单选项----

                  <div>    下拉菜单         未触发：opacity：0   z-index：-1      触发时：opacity：1  z-index：1     

                                transition: opacity  0.3s ease;     

                 </div>

         </li>

 </ul>

如果说下拉菜单触发时，没有过渡效果，那么会造成，下拉的效果正在执行，而内容先显现出来，这体验很不好，因此加了过度效果的话，可以实现下拉效果，内容显示同时执行，但是会带来的问题就是会引起闪烁效果，但是因为时间比较短，所以闪烁效果不明显，几乎可以忽略闪烁效果的影响。

代码如图：

效果如下：

这就是导航栏的效果展示。

在实现一个效果之前，要进行  布局分析  和  动画演示分析，先分析完了，在动手写代码，这样才会更高效效率的实现一个效果。