Change CSS using JQuery (Animation)-CodePudding

Im trying to stop or remove the animation on CSS using jquery but it wont work.I'm making a skeleton loading and trying to stop the CSS animation when the page load.

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%}
}

Here on 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>

CodePudding user response：

Maybe can try this solution:

css:

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

js:

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

the other solution:

js:

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

CodePudding user response：

Pseudo-elements are part of the Shadow DOM, so they can't be directly modified. However, you can use classes to to modify them, here's a work around.

jQuery

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

CSS

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

CodePudding user response：

It is not possible to target the ::after pseudo element using javascript directly,since it is part of the DOM. One solution you can try is appending a style tag containing the exact css, to the head or body of html. Something like this:

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

in above solution, the selector is directly targeted with the css required.

So, the final javascript will look like this:

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