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

看了第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再加一个宽度的变化,这样三级菜单就能完美显示啦!

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值