纯css实现下拉菜单淡入+延迟淡出效果
发布网友
发布时间：12小时前
共1个回答
热心网友
时间：9小时前
以前面临鼠标移入一级菜单显示下拉菜单，移开则隐藏，需要淡入、延迟淡出效果，仅使用CSS无法实现。JS与jQuery能通过设置定时器和fade效果达成目的。然而，纯CSS实现这一效果，主要依赖:hover伪类、后代选择器、opacity、transition、visibility以及animation与pointer-events。
实现步骤如下：初始下拉菜单visibility为hidden，opacity为0。鼠标移入时，visibility变为visible，opacity变为1，实现淡入。同时添加transition，让opacity持续0.3s，完成淡入效果。初始状态下拉菜单的transition，让opacity与visibility持续0.3s，实现淡出效果。通过给初始状态的下拉菜单添加transition的opacity延迟0.3s，同时将visibility的持续时间改为0.6s，实现延迟淡出。
为解决在淡出期间禁止取消淡出的问题，通过将pointer-events设置为none，让鼠标事件不触发。然而，transition不能直接作用于pointer-events，因此引入animation。为初始状态的下拉菜单添加animation，持续0.6s，通过定义两个分别占50%时间的关键帧，实现pointer-events从auto到none的转换，达到禁止取消淡出的效果。
完整示例代码已提供，包括针对不同场景的多种效果实现。同时，通过引入aa-前缀作为命名空间，利用CSS变量和calc函数对代码进行封装，实现代码的可复用性与定制性。这一技术使得在不同项目中快速应用相同效果成为可能，提高开发效率。
