我有一个简单的 html 页面，其中包含 div 和 form 元素，在页面加载后它们只是动画。
这是 HTML 代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles/global.css">
<link rel="stylesheet" type="text/css" href="styles/index.css">
<script src="scripts.js"></script>
<title></title>
</head>
<body>
<div id="wholepage">
<div id="loginformdiv">
</div>
<form id="loginform">
<p id="loginformh">Login</p>
<input type="text" id="loginformusr" placeholder="Uživatelské jméno">
<input type="password" id="loginformpw" placeholder="Heslo">
<input type="button" value="›" id="loginformsubmit" onclick="loginformcheck()">
</p><p id="loginformalert"></p>
</form>
</div>
</html>
我为 div 和 form 创建了 4 个动画。加载 index.html 后，应该加载前两个。这两个工作正常。但是最后两个动画应该在用户点击按钮后加载，我的 js 代码会检查表单是否填写正确。这些动画结束后，它应该加载到 afterlogin.html 页面。
这是我的部分 CSS 代码:
@keyframes afterstartdiv {
from {opacity: 0;}
to {opacity: 0.5;}
}
@keyframes afterstartform {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes afterlogindiv {
from {opacity: 0.5;}
to {opacity: 0;}
}
@keyframes afterloginform {
from {opacity: 1;}
to {opacity: 0;}
}
这是我的整个 js 代码:
function loginformcheck() {
var username = document.getElementById("loginformusr").value;
var password = document.getElementById("loginformpw").value;
if (username.length == 0 && password.length == 0)
{
document.getElementById("loginformalert").innerHTML = "Vyplňte přihlašovací údaje!";
}
else if (username.length == 0)
{
document.getElementById("loginformalert").innerHTML = "Vyplňte přihlašovací jméno!";
}
else if (password.length == 0)
{
document.getElementById("loginformalert").innerHTML = "Vyplňte heslo!";
}
else if (!username.match(/^\w+$/) || !password.match(/^\w+$/))
{
document.getElementById("loginformalert").innerHTML = "Uživatelské jméno nebo heslo je nesprávné!";
}
else if (username.match(/^\w+$/) && password.match(/^\w+$/))
{
login();
}
}
function login() {
var username = document.getElementById("loginformusr").value;
var password = document.getElementById("loginformpw").value;
var alert = "Uživatelské jméno nebo heslo je nesprávné!";
if (username.match("jakub") && password.match("poiuz"))
{
function afterloginanimation(timer) {
setTimeout(function(){
if (timer == -1) {
window.location.href = "afterlogin.html";
}
}, 1500);
}
document.getElementById("loginformdiv").style.AnimationName = "afterlogindiv";
document.getElementById("loginformdiv").style.AnimationDuration = "1.5s";
document.getElementById("loginform").style.AnimationName = "afterloginform";
document.getElementById("loginform").style.AnimationDuration = "1.5s";
}
else
{
document.getElementById("loginformalert").innerHTML = alert;
}
最佳答案
语法在我看来是正确的，您是否尝试过将超时设置得更长一点？另外，当您说它不起作用时，您会收到控制台错误吗？如果没有，您能否在超时函数内部进行控制台登录以验证它是否真的在触发？
关于用于调用 CSS 动画的 Javascript 代码不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41149656/