单击提交按钮时禁用 CSS3 淡入

Question

当我的登录页面加载时，我的淡入淡出效果非常完美。

我正在使用一个表格从连接到数据库的用户那里收集用户名和密码。 我还有一个PHP错误，当用户名和密码不正确或没有插入数据时显示。

我的问题是，当我单击提交而不输入任何内容时，我的页面将再次淡入并显示错误。

如何阻止页面在显示错误消息时淡入？

我只希望页面在用户第一次进入网站时淡入。

.CSS：

body{
animation: fadein 1.5s;}
@keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

PHP 显示错误：

<p><?php echo $error; ?></p>

Answer 1

最简单的解决方案是要求对表单进行客户端验证。这将防止每次按下提交按钮时页面重新加载，并且表单不完整或不令人满意。

将"必需"属性添加到输入中(至少)或添加一些JS验证。

例如：

<input type="text" id="username" required>
<input type="password" id="password" required">
<button type="submit">Submit</button>

大多数浏览器都支持此功能。 https://caniuse.com/#feat=form-validation

最好用javascript验证来补充这一点。您可以在 MDN 上找到更多信息。https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation

编辑：要回答您的评论：

如您所见，客户端验证唯一会检查的是 (a) 完成和/或 (b) 模式条件(如正则表达式或 HTML5 条件 [输入类型="电子邮件"，输入类型="数字"等])。

针对数据库中的现有用户验证用户名和密码将落入 PHP 验证(或其他服务器端处理程序)的处理。如果不使用 AJAX，就无法在不重新加载页面的情况下检查正确的用户名/密码。假设您想为此跳过学习 AJAX，您可以尝试以下操作：

If (username) and (password) == (username) and (password)
{redirect to ('success.html')}
else {redirect to ('fail.html')}
NOTE: THIS IS AN OUTLINE OF CONCEPT -- NOT THE ACTUAL CODE

在"失败.html"中，不包括淡入。这意味着用户将转到登录页面(将淡入)，然后从那里转到成功页面或失败页面，两者都不会包含淡入的代码。

Answer 2

除了错误之外，您还可以回显样式，这会覆盖动画。例如：

<style>
body{
animation:unset !important;
}
</style>

仅当错误在 css 之前回显时才使用！important。