尚品汇项目用CSS优化Search模块中的商品分类与过渡动画

关注

原创 2022-11-06 14:36:21 384 阅读 AI 写同款· GEO 优化 ›

Html+Css新手简单快速仿京东商品分类导航看一看最终的效果: 下面我们就按照分析→设计→实现三大步骤来完成这个导航的效果，学会了之后，会发现大多数电商都是用这样的效果的。我们先从把结构写好：一个nav包含上面一个div(全部商品分类),一个导航列表(ul li) 然后在每一个li里面都包含一个默认不显示的的大div(利用了绝对定位，这个div分成左边:小分类列表,右边图片广告) 因为我是用纯css+html写的，所以它的文件有阅读详情

看了第30P的功能用JS实现，有些大费周折了，最后那个transation过度也非常丑，

是先显示出文字，后面才有动画，所以也引起了很多弹幕的不满

所以我尝试着用CSS实现了一下，效果还是挺完美的：

1.首先将html结构修改一下，把要控制隐藏和显示的.sort元素放到.nav元素的前面，因为后面要用hover兄弟选择器控制.sort的显示与隐藏，

然后给这两个标签加两个三元表达式

判断当前路径是search时 .sort的高度为0（为后面实现transation高度变化铺垫），且当路径为search时，给h2元素加上一个TypeNavHover的类：

（此举动不会改变页面布局）

2. 新增CSS样式，

这里加overflow:hidden解决了老师最后文字先显示，再显示过渡动画的问题

但只加overflow会导致三级菜单也被hidden，所以要给.sort:hover再加一个宽度的变化，这样三级菜单就能完美显示啦！

这里是一共修改到的代码：

 <h2 class="all" :class="$route.path == '/search' ? 'TypeNavHover' : ''">
        全部商品分类
      </h2>

      <div
        class="sort"
        :style="$route.path == '/search' ? 'height:0' : ''"
      >
        ...
      </div>

  .TypeNavHover:hover + .sort {
      height: 461px !important;
    }
  .sort:hover {
      height: 461px !important;
      width: 800px !important;
    }
  .sort {
      transition: all .3s;
      overflow: hidden;
    }

这个是最终效果：