php - 如何在 PHP 变量更新时切换 CSS 动画？

Question

所以我在 PHP 中得到了这个函数:

$username = $password = $usernameError = $passwordError = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    if (empty($_POST["username"])) {
        $usernameError = "Username invalid";
    } else {
      $username = check($_POST["username"]);
    }

我想激活这个 CSS 动画:

#error {
	color = red;
	animation:error 2s 1;
	-webkit-animation:error 2s 1;
	animation-fill-mode: forwards;
	animation-delay: 4s;
	-webkit-animation-delay: 4s;
	-webkit-animation-fill-mode: forwards;
}
@keyframes error{
	from {opacity :1;}
	to {opacity :0}
}
@-webkit-keyframes error{
	from {opacity :1;}
	to {opacity :0}
}

当变量$usernameError从nothing变成something时，在上面的例子中它变成了“Username invalid”

作为引用，这是应用动画的 html 元素:

<span id="error">* <?php echo $usernameError;?></span>

对于如何实现这一点有什么建议吗？

Answer 1

感谢 Sven 实际上真的很简单:

在我添加的 HTML 元素上

onchange="animate()"

这使得它看起来像这样:

<span onchange="animate()" id="error">* <?php echo $usernameError;?></span>

切换此动画的 javascript 代码也相当简单:

element.style.webkitAnimationPlayState = "paused";
function animate() {
	element.style.webkitAnimationPlayState = "running";
	setTimeout(function (), 5000);
	element.style.webkitAnimationPlayState = "paused";
}