Question

我有一个带有div和表单元素的简单html页面，只需在页面加载后进行动画处理。

这是HTML代码：

(function(thang) {setTimeout(function() {
    thang.style.opacity = "1"
    thang.style.marginTop = "0";
  }, timeOut);})(thang)

我为div和form创建了4个动画。应该在加载index.html之后加载前两个。这两个正常工作。但是最后两个动画应该在用户点击按钮后加载，我的js代码检查表单是否正确填充。在这些动画结束后，它应加载到afterlogin.html页面。

以下是我的CSS代码的一部分：

<!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>

这是我的整个js代码：

@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;}
}

}

Answer 1

对我来说，语法看起来是正确的，您是否尝试过更长时间地设置超时？此外，当你说它不起作用你是否收到控制台错误？如果没有，你可以在超时功能中控制登录，以验证它实际上是否正在发射？

用于调用CSS动画的Javascript代码不起作用

1 个答案: