0
divとform要素を持つ単純なhtmlページがあり、ページが読み込まれた後に単純にアニメーション表示されます。ここでCSSアニメーションを呼び出すためのJavascriptコードが機能しません
は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要素やフォームの4つのアニメーションを作成しました。最初の2つは、index.htmlがロードされた後にロードされるはずです。これら2つは正常に動作しています。しかし、最後の2つのアニメーションは、ユーザーヒットボタンの後に読み込まれ、フォームが正しく入力されているかどうかを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;
}
}
あなたのJSコードはどこですか？それは頭の中で呼ばれていますか？あるいは、文書が準備されるのを待っていますか？ –
jsコード全体は外部ファイル "scripts.js"にあります。場所に問題はありません。フォームの正しい塗りつぶしをチェックする関数はうまくいきます。 – Grakon2702
こんにちは、単なる考え：インラインアニメーションプロパティを設定するのではなく、すべてのクラスを定義してターゲット要素に追加することができますか？ 例： ＃loginformdiv.animating { アニメーション：afterlogindiv 1.5s; } ＃loginform.animating { アニメーション：afterloginform 1.5s; } –