Day26 - Stripe Follow Along Nav
作者:©Mrlin(史密斯林)
简介:学习记录,用于记录在CSDN课程中的学习内容。
课程:30天完成30个JS原生开发项目挑战视频教程。JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。
效果如下
源码
1 | // javascript |
1 | <!-- 部分CSS --> |
代码解析
- 鼠标进入监听
1 | menu.forEach(ele => ele.addEventListener('mouseenter', mouseEnter)); |
- 鼠标移除监听
1 | menu.forEach(ele => ele.addEventListener('mouseleave', mouseLeave)); |
- 过渡动画的实现原理
当鼠标移动到某一个选项后,首先使下拉菜单显示,但是在150ms内使其显示出来,这里用了settimeout(fn,150)
,来延迟添加下拉菜单的trigger-enter-active
类名,这样就会有一个过渡的效果了。
- 鼠标进入时添加类名
1 | this.classList.add('trigger-enter'); |
这里有一点需要注意,因为我们设置了150ms延迟之后添加trigger-enter-active
类,那么有可能会发生这样的情况:当我们以飞快的速度在各个选项之间切换的时候,有可能还没有到150ms鼠标就已经移出了选项了,这时在150ms之后,就会多添加了trigger-enter-active
类在每一个选项里面,造成意想不到的错误。
因此我们加了一句判断,150ms后只有当该鼠标还悬停在这个选项之中的时候,我们才添加trigger-enter-active
类。
- 动态的设置白色背景块的位置信息
1 | const coords = { |
这里有一点需要注意的是,我们在为白色背景块设置左边距和上边距的时候,要分别减去导航栏的上边距和左边距。因为我们的导航栏上面可能会有其他的内容,若不将这段距离减去,就会造成白色背景块位置偏移。
translate3D(x,y,z)
这里之所以使用translate3D
,是因为translate3D
属性会触发硬件加速,开启了硬件加速的transform
是不会触发界面repaint
的,拥有更好的性能。