添加跳转后CSS3按钮动画失效，如何实现动画完成后再跳转？

这个问题太常见了——当你给按钮绑定表单提交或直接跳转时，浏览器会立刻执行导航操作，完全跳过CSS过渡/动画的播放。要解决这个问题，我们得用JavaScript来阻止默认的即时跳转行为，等动画完整跑完后再手动触发页面跳转。

具体解决步骤： #

1. 先修复你代码里的标签错误：原代码中<span> Login </button></span>的标签顺序颠倒了，得先闭合</span>再闭合</button>，不然会导致DOM结构异常。
2. 给按钮加点击事件监听器，阻止默认的表单提交行为。
3. 等待CSS动画（这里是0.5秒的transition）完成后，再手动跳转到目标页面。

修改后的完整代码： #

<!DOCTYPE html>
<html lang="En">
<meta charset="utf-8">
<!--CREDITS-->
<meta name="Developer" content="Elitezen">
<meta name="Language(s)" content="HTML5 , CSS3 , JS">
<meta name="Software" content="anWriter">
<!-- END CREDITS -->
<head>
<title> Elitezen Website Test | Login Page </title>
<style>
html {
background-image: url('http://image.downloadwap.co.uk/wallpapers/wp/18/nature/maligne-st_pJi7nPeU.jpg');
background-repeat: no-repeat;
min-height: 100%;
background-size: cover;
}
h1 {
color:#ffffff;
margin-top:20px;
}
#Login{
/*VISUALS*/
padding-left:20px;
padding-right:20px;
padding-top:10px;
padding-bottom:10px;
background-color:#0095f0;
border:none;
color:#ffffff;
font-weight:bold;
border-radius:4px;
display: inline-block;
/*POSITION*/
position: absolute;
top: 400px;
right: 135px;
/*Metrics*/
font-size:20px;
/*ANIMATION*/
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
#Login span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
#Login span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top : 0;
right: -20px;
transition: 0.5s;
}
#Login:hover span {
padding-right: 25px;
}
#Login:hover span:after {
opacity: 1;
right: 0;
}
/* 可选：添加点击后的动画效果，增强交互反馈 */
#Login.clicked {
transform: scale(0.95);
opacity: 0.8;
}
</style>
</head>
<body>
<h1 align="center">Welcome! <br /> Please Sign In...</h1>
<!-- 保留表单但通过JS控制提交逻辑 -->
<form id="loginForm">
<button id="Login" style="vertical-align:middle">
<span> Login </span>
</button>
</form>
<script>
const loginBtn = document.getElementById('Login');
const loginForm = document.getElementById('loginForm');

loginBtn.addEventListener('click', function(e) {
  // 阻止浏览器默认的表单提交行为
  e.preventDefault();
  
  // 触发点击后的额外动画（可选，让用户明确感知点击操作）
  this.classList.add('clicked');
  
  // 等待动画完成（和CSS中transition的0.5s时长对应）
  setTimeout(() => {
    // 手动跳转到目标页面
    window.location.href = 'Oofio.html';
    // 如果需要提交表单，也可以用 loginForm.submit();
  }, 500);
});
</script>
</body>
</html>

为什么这样能解决问题？ #

• e.preventDefault()直接阻止了浏览器的即时跳转/提交，给动画留出了播放时间。
• setTimeout设置的延迟和CSS动画时长完全匹配，确保动画播完再跳转。
• 额外加的.clicked类能给用户更清晰的点击反馈，让交互流程更流畅。

更精准的进阶方案：监听动画结束事件 #

如果你有多个不同时长的动画，固定延迟可能不够精准，可以监听transitionend事件，等所有过渡动画真正结束后再跳转：

loginBtn.addEventListener('click', function(e) {
  e.preventDefault();
  this.classList.add('clicked');
  
  // 监听过渡结束事件
  const handleTransitionEnd = () => {
    window.location.href = 'Oofio.html';
    // 移除事件监听器，避免重复触发
    this.removeEventListener('transitionend', handleTransitionEnd);
  };
  
  this.addEventListener('transitionend', handleTransitionEnd);
});

这种方式能完美适配任意时长的动画，比固定延迟更可靠。

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