使用 JQuery 更改 CSS（动画）

Question

我正在尝试使用 jquery 停止或删除 CSS 上的动画，但它不会 work.I 正在加载骨架并尝试停止 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>

Answer 1

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

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();
});

Answer 2

伪元素是阴影的一部分DOM，所以不能直接修改。但是，您可以使用类来修改它们，这里有一个解决方法。

jQuery

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

CSS

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

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

使用 JQuery 更改 CSS（动画）

Change CSS using JQuery (Animation)

jquery

css

jquery-animate