显示和隐藏 CSS 动画答案

【问题标题】：Reveal and conceal CSS animation显示和隐藏 CSS 动画
【发布时间】：2019-06-17 21:05:37
【问题描述】：

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

但是我现在正试图显示和隐藏模式覆盖。

提交时出现在模态表单上，并在 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/

【问题讨论】：

标签： javascript jquery css ajax

【解决方案1】：

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

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

在您的 AJAX 开始的地方添加以下行：

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

以下是起始块：

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');

结果：

【讨论】：

我无法完全通过复制和粘贴来完成此操作，也许我不太了解您的答案，但它确实有帮助。我所要做的就是将覆盖 div 的类更改为 animate-conceal，然后在 form.valid() 和 AJAX 成功之后添加切换功能。感谢您的非 hacky 帮助！ :)

【解决方案2】：

所以我找到了一个解决方案，但感觉有点老套，仍然可以随意权衡。

AJAX 成功：

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

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

【讨论】：

查看我的答案以了解非“hacky”方式:)