点击后如何缩放SVG？导航栏SVG点击缩放动画与页面跳转绑定实现方法问询

我来帮你搞定这个问题！要在页面跳转前让对应的SVG元素平滑缩放至原尺寸的1.3倍，我们可以通过CSS过渡动画 + 延迟跳转的组合来实现，既简单又能保证流畅的用户体验。下面是具体的实现步骤和修改后的完整代码：

1. 给SVG添加统一类名 #

先给所有导航栏里的SVG元素加上一个通用类（比如nav-svg），方便后续选择和操作：

<script defer src="css/theme.js"></script>
<nav class="navbar">
  <ul class="navbar-nav">
    <li class="logo">
      <a id="logo-overwrite" class="nav-link">
        <span class="link-text logo-text">Secrets</span>
        <svg class="nav-svg" aria-hidden="true" focusable="false" data-prefix="fad" data-icon="angle-double-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
          <g class="fa-group">
            <path fill="currentColor" d="m1...75z" class="fa-primary"></path>
          </g>
        </svg>
      </a>
    </li>
    <!-- Home -->
    <li class="nav-item" onclick="handleNavClick(event, '/secrets')">
      <a class="nav-link">
        <svg class="nav-svg" aria-hidden="true" focusable="false" data-prefix="fad" data-icon="home" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
          <g class="fa-group">
            <path fill="currentColor" d="m247..23z" class="fa-primary"></path>
          </g>
        </svg>
        <span class="link-text">Home</span>
      </a>
    </li>
    <!-- Login -->
    <li class="nav-item" onclick="handleNavClick(event, '/login')">
      <a class="nav-link">
        <svg class="nav-svg" aria-hidden="true" focusable="false" data-prefix="fad" data-icon="sign-out" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-space-station-moon-alt fa-w-16 fa-5x">
          <g class="fa-group">
            <path fill="currentColor" d="m4..31112 9.46348,-26.98443 0,-37.29556z" class="fa-primary"></path>
          </g>
        </svg>
        <span class="link-text">Login</span>
      </a>
    </li>
  </ul>
</nav>

2. 添加CSS过渡动画 #

在你的样式文件或者页面内的<style>标签中添加以下代码，定义缩放的过渡效果，让动画更自然：

.nav-svg {
  transition: transform 0.3s ease-in-out; /* 0.3秒过渡时长，缓动曲线可选 */
  transform-origin: center; /* 以SVG中心为缩放原点，避免偏移 */
}

.nav-svg.scale-up {
  transform: scale(1.3); /* 缩放至原尺寸的1.3倍 */
}

3. 统一处理点击事件的JS函数 #

把原来的多个独立延迟函数合并成一个通用函数，实现“触发动画 → 延迟跳转”的逻辑：

<body>
<script>
// 通用导航点击处理函数
function handleNavClick(e, targetUrl) {
  // 获取当前点击项内的SVG元素
  const svg = e.currentTarget.querySelector('.nav-svg');
  // 添加缩放类，触发动画
  svg.classList.add('scale-up');
  
  // 延迟时长与过渡动画一致，确保动画完成后再跳转
  setTimeout(() => {
    window.location.href = targetUrl;
  }, 300);
}

// 保留你原来的表单提交延迟逻辑
document.querySelectorAll('form').forEach(form => {
  form.addEventListener('submit', (e) => {
    e.preventDefault();
    setTimeout(() => {
      form.submit();
    }, 900);
  });
});
</script>
</body>

方案说明 #

• CSS过渡优势：相比JS直接操作样式，CSS过渡性能更优，动画更流畅，代码也更简洁。
• 统一函数设计：避免重复编写相似的延迟函数，后续新增导航项时只需调用同一个函数，维护成本更低。
• 同步延迟时长：将跳转延迟设置为和过渡动画时长一致（300ms），保证缩放动画完全展示后再跳转，用户体验更连贯。

如果想要更丰富的动画效果，还可以调整CSS的过渡曲线（比如自定义贝塞尔曲线），或者添加缩放后的回弹效果哦~

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