javascript - 显示和隐藏 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

您正在从您的元素中删除 animate-reveal 类，这将使它不再具有动画效果。就在你做的地方 $('.loadingSignin').show();您需要在 ajax 查询的开头重新添加该动画。

只需切换两个必要的类，您就可以拥有动画并显示您的元素。

在您的 AJAX 开始处添加以下行:

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

这是起始 block :

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

然后在 ajax 调用完成的地方再次粘贴完全相同的内容。

success: function (data) {
    // log data to the console so we can see
    console.log(data);
    $('.loadingSignin').toggleClass('animate-conceal').toggleClass('animate-reveal');

结果: