使用 JQuery（动画）更改 CSS答案

【问题标题】：Change CSS using JQuery (Animation)使用 JQuery（动画）更改 CSS
【发布时间】：2021-11-10 06:43:30
【问题描述】：

我正在尝试使用 jquery 停止或删除 CSS 上的动画，但它不起作用。我正在加载骨架并尝试在页面加载时停止 CSS 动画。

CSS

[data-placeholder]::after {
   content: " ";
   box-shadow: 0 0 50px 9px rgba(254,254,254);
   position: absolute;
   top: 0;
   left: -100%;
   height: 100%; 
   animation: load 1s infinite;
}
@keyframes load {
   0%{ left: -100%}
   100%{ left: 150%}
}

在 jquery 上

$(window).on("load", function() {
  $("#press").fadeOut("slow");
  $("[data-placeholder]").css("animation", "");
});

HTML

<button id="'.$UID2.'" onclick="openow(this)" data-placeholder class="relative flex justify-between bg-gray-50 rounded-3xl bg-cover text-gray-800 overflow-hidden cursor-pointer w-44> Click Me</button>

【问题讨论】：

您可以向此[data-placeholder] 添加一个类并使用该类覆盖动画。
如果我错了，请纠正我，就像我将创建一个带有 .data 占位符的单独类来覆盖动画（如果使用）？
是的，没错，我已经在我的回答中解释过了。

标签： jquery css jquery-animate

【解决方案1】：

伪元素是 Shadow DOM 的一部分，因此不能直接修改。但是，您可以使用类来修改它们，这是一种解决方法。

jQuery

$(function () { // document ready state
    $("[data-placeholder]").addClass('stop-animation');
});

CSS

.stop-animation:after {
    animation: none !important;
}

【讨论】：

【解决方案2】：

也许可以试试这个解决方案：

css:

.noAnimation {
    animation: none;
// or
    animation-play-state: paused;
}

js:

$("#press").fadeOut("slow", function() {
    $("[data-placeholder]").addClass('noAnimation');
});

另一种解决方案：

js:

$("#press").fadeOut("slow", function() {
    $("[data-placeholder]").remove();
});

【讨论】：

嗨。感谢您的关注。我在帖子上添加了 HTML，这样你就可以看到我在哪里实现了这个类。我试试这个
您应该将 noAnimation 类添加到 [data-placeholder] 或要停止其动画的元素，请注意在动画完成后您应该这样做。也提到了其他解决方案...
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案3】：

无法直接使用 javascript 定位 ::after 伪元素，因为它是 DOM 的一部分。您可以尝试的一种解决方案是将包含确切 css 的样式标记附加到 html 的 head 或 body。像这样的：

$("body").append('<style>[data-placeholder]:after{animation:none}</style>');

在上述解决方案中，选择器直接以所需的 css 为目标。

所以，最终的 javascript 将如下所示：

$(window).on("load", function() {
  $("#press").fadeOut("slow");
  $("body").append('<style>[data-placeholder]:after{animation:none}</style>');
});

【讨论】：

伪元素 not 是 DOM 的一部分，它们是 Shadow DOM 的一部分，您应该使用 head 而不是 body，因为这是一个好方法在head 中使用style。