調用CSS動畫的Javascript代碼不起作用

Question

我有一個帶有div和form元素的簡單html頁面，在頁面加載后會簡單地進行動畫處理。

這是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;
}

}

Answer 1

語法對我而言看起來是正確的，您是否嘗試將超時時間設置得更長一點？ 另外，當您說它不起作用時，還會收到控制台錯誤嗎？ 如果不能，您是否可以在超時功能內進行控制台日志以驗證其是否確實在觸發？

調用CSS動畫的Javascript代碼不起作用

問題描述

1 個解決方案

解決方案1
0 2016-12-14 18:36:40

調用CSS動畫的Javascript代碼不起作用

問題描述

1 個解決方案

解決方案1 0 2016-12-14 18:36:40

解決方案1
0 2016-12-14 18:36:40