如何使用CSS/HTML/Javascript实现Hover时字母展开动画效果

实现思路 #

• 给元音字母单独添加标记类，通过CSS过渡实现平滑的显示/隐藏动画，避免生硬的display切换
• 利用CSS的max-width、opacity属性实现文字展开收起的动效，比直接修改display更易实现过渡动画
• 整个文本包裹在a标签内，天然满足整词作为链接的需求
• 可通过JS添加延迟逻辑，实现鼠标移出后延迟收起的效果

完整代码实现 #

HTML代码 #

<nav>
  <div class="container">
    <h1>
      <!-- 整个a标签包裹所有内容，整词默认就是可点击链接 -->
      <a href="index.html" class="abbr-link">
        <span class="prefix">p|</span>
        <span class="char consonant">p</span>
        <!-- 元音字母加vowel类，默认隐藏 -->
        <span class="char vowel">a</span>
        <span class="char consonant">r</span>
        <span class="char consonant">k</span>
        <span class="char vowel">e</span>
        <span class="char consonant">r</span>
      </a>
    </h1>
  </div>
</nav>

CSS代码 #

.abbr-link {
  text-decoration: none;
  color: inherit;
  font-family: monospace; /* 等宽字体保证动画更整齐，可根据需求更换 */
  font-size: 24px;
}
.prefix {
  margin-right: 0.2em;
}
.char {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  transition: all 0.25s ease;
}
/* 元音默认隐藏状态 */
.vowel {
  opacity: 0;
  max-width: 0;
}
/* 不需要JS的基础hover效果，直接用这个选择器即可 */
.abbr-link:hover .vowel {
  opacity: 1;
  max-width: 1em; /* 等宽字体下1em刚好容纳一个字符 */
}
/* 如果要搭配JS实现延迟收起效果，注释上面的hover选择器，启用下面的类选择器 */
/*
.abbr-link.is-active .vowel {
  opacity: 1;
  max-width: 1em;
}
*/

JS代码（可选，用于添加延迟收起效果） #

如果需要鼠标移出后延迟一段时间再收起缩略效果，避免鼠标快速滑过时频繁触发动画，可以用以下JS实现：

const abbrLink = document.querySelector('.abbr-link');
let hideTimer = null;

abbrLink.addEventListener('mouseenter', () => {
  // 鼠标移入时清除之前的收起定时器
  if (hideTimer) {
    clearTimeout(hideTimer);
    hideTimer = null;
  }
  abbrLink.classList.add('is-active');
});

abbrLink.addEventListener('mouseleave', () => {
  // 鼠标移出后延迟300ms再收起，可自行调整延迟时间
  hideTimer = setTimeout(() => {
    abbrLink.classList.remove('is-active');
  }, 300);
});

核心说明 #

• 默认隐藏元音的逻辑就是通过给元音元素加vowel类，默认设置max-width:0和opacity:0实现，不需要额外处理
• 整词作为链接的需求已经通过把所有字符包裹在<a>标签内实现，点击任意位置都会触发链接跳转
• 如果不需要延迟效果，完全可以不用写JS，只用CSS的hover选择器就能实现基础动效
• 推荐使用等宽字体，能让展开收起的动画更整齐流畅，没有文字偏移的问题

内容的提问来源于stack exchange，提问作者pdev