显示和隐藏CSS动画

Question

所以我有一个动画，可以显示一些东西，这在我的网站上的几个地方都可以看到。

但是我现在正试图显示和隐藏模式叠加层。

在提交时，它出现在模式表单上，而在AJAX调用返回一些数据时消失。

问题在于动画在“隐藏”后卡住，这意味着我无法单击“提交”并再次使其“显示”。

在AJAX之前：

<div class="loadingElement animate-reveal" style="display:none;">...</div>

AJAX开始：

$(".loadingElement").show();

AJAX成功：

$(".loadingElement").removeClass("animate-reveal");
$(".loadingElement").addClass("animate-conceal");

如果您想看看自己，请转到： http://halden.101test1.co.uk/college/

Answer 1

您正在从元素中删除动画显示类，这将使其不再动画。在您执行$（'。loadingSignin'）。show（）;的位置您需要在ajax查询的开头重新添加该动画。

只需切换两个必需的类，它们将使您拥有动画并显示您的元素。

您的AJAX开始的位置添加以下行：

git-shell

以下是起始块：

$('.loadingSignin').toggleClass('animate-conceal').toggleClass('animate-reveal');

然后，在ajax调用完成的位置再次粘贴完全相同的内容。

if (form.valid()) {
    $('.loadingSignin').toggleClass('animate-conceal').toggleClass('animate-reveal');
    $(".loadingSignin").show();

结果：

Answer 2

所以我找到了一个解决方案，但感觉有些不舒服，请随时考虑。

AJAX成功：

$(".loadingSignin").addClass("animate-conceal");

$(".loadingSignin").one("animationend webkitAnimationEnd", function () {
    $(".loadingSignin").hide();
    $(".loadingSignin").removeClass("animate-conceal");
    $(".loadingSignin").off("animationend webkitAnimationEnd");
});