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

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

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

尚品汇项目 用CSS优化Search模块中的商品分类与过渡动画_第1张图片

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

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

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

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

(此举动不会改变页面布局) 

尚品汇项目 用CSS优化Search模块中的商品分类与过渡动画_第2张图片 

2. 新增CSS样式,

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

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

尚品汇项目 用CSS优化Search模块中的商品分类与过渡动画_第3张图片

 尚品汇项目 用CSS优化Search模块中的商品分类与过渡动画_第4张图片

 尚品汇项目 用CSS优化Search模块中的商品分类与过渡动画_第5张图片

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

 

全部商品分类

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

这个是最终效果:

尚品汇项目 用CSS优化Search模块中的商品分类与过渡动画_第6张图片

怎么样?是不是比老师用JS和vue的transition简单多了?嘿嘿

而且样式也好看很多

只加了几个CSS样式,两个三元表达式

而且CSS性能应该也比JS要好吧,不用等待JS加载

第一次写博客,有什么问题欢迎大家在评论区一起交流,有什么错误请大家指正ヾ(≧▽≦*)o

你可能感兴趣的:(尚品汇项目,html5,css,vue.js)