使用 JQuery 更改 CSS(动画)

Change CSS using JQuery (Animation)

我正在尝试使用 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>

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

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

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

jQuery

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

CSS

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

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

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