我的导航栏中有一堆带有 SVG 的链接。它们都有一个 onClick 延迟函数,我打算将其用于基本动画,在重定向到链接之前将 SVG 缩放到其原始大小的 1.3。现在不知何故我需要将两者绑定在一起,但不知道如何。
Header.ejs
<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 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="welcomeTimoutFunction()">
<a class="nav-link">
<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="logout2TimoutFunction()">
<a class="nav-link">
<svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="sign-ou" 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>
<body>
<script>
function welcomeTimoutFunction() {
setTimeout(function(){
window.location.href = "/secrets";
},900);
};
function facebookTimoutFunction() {
setTimeout(function(){
window.location.href = "/auth/facebook";
},900);
};
document.querySelectorAll('form').forEach(form => {
form.addEventListener('submit',(e) => {
e.preventDefault();
setTimeout(() => {
form.submit();
},900);
});
});
</script>