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

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

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

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

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

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

因此是这样的：

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

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

</ul>

</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>

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

代码如图：

效果如下：

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

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

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

华为底部虚拟导航栏挡住布局
问题:在实现ViewPager+Fragment+侧滑栏的界面时,华为搭载Android5.0以上操作系统的手机出现底部虚拟导航栏挡住布局.如下图所示: 问题解决后: 尝试在实现这个功能的时候,我发 ...
记一次小程序自定义导航栏及加载动画的解决方案
记一次小程序自定义导航栏及加载动画的解决方案主要逻辑就是动态获取设备的 statusBarHeight 和 titleBarHeight,来设置导航栏的高度和 paddingTop ip6 ipx ...
php 3d animation,CSS_纯CSS实现菜单、导航栏的3D翻转动画效果，我曾经向大家展示过闪光的logo - phpStudy...
纯CSS实现菜单.导航栏的3D翻转动画效果我曾经向大家展示过闪光的logo,燃烧的火狐狸,多重嵌套动画等例子,今天,我们将要制作一个简单但非常酷的3D翻转菜单.大家可以先看看实际效果,下面有效果截图 ...
小米商城侧导航栏的实现（导航栏的制作）
侧导航栏在我们写的时候很常用,很多网站上面都有侧边导航栏的应用,那么如何制作侧边导航栏呢? 下面看一看我制作的小米商城的侧导航栏. 看下列代码: <body><div class=& ...
css订单导航栏横线动画,小程序纯css 实现tab导航栏下划线跟随动画
很多时候在做tab导航的点击时我们都会要上一个过渡的动画,不然的话会显得生硬,用户没有达到比较佳的用户体验.如下图: 在开发者工具中预览效果 t3fyo-a07nj.gif 我们可以用两种方法实现这样 ...
【从0开始vue】点击后弹出对话框（其他部分变灰度） + 导航栏之间的切换动画
从什么都不会到按照自己的意思开始瞎几把搜 1.相关网址这些都没啥用..多少给点启发吧网址https://segmentfault.com/q/1010000016889624 https:// ...
JQ实现标签栏切换效果、导航栏下滑效果以及动画队列和stop（）方法
标签栏切换 HTML <div class="box"><div class="tab-list"><ul><li&g ...
js+css制作导航栏下划线跟随动画，App+H5点击效果
这是使用Vue制作的一个下划线跟随效果,没有使用其他插件目录 1. 制作一个初始的导航栏 2. 增加点击样式 3. 下划线移动最终代码注意事项这是最终效果↓ 一开始从网上查其他人的做法,大部分 ...
小米商城顶部导航栏练习
学习过程中并记录了这篇笔记目录 css代码 html代码效果使用的图标字体在阿里iconfont下载,关于商城例如图片等素材在商城官网mi.com下载. css代码 body{font: 14p ...

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

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

最新文章

热门文章