时间戳

首页 > 解决方案 > 使用 JQuery（动画）更改 CSS

jquery - 使用 JQuery（动画）更改 CSS

问题描述

我试图使用 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>

标签： jquerycssjquery-animate

解决方案

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

jQuery

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

CSS

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

推荐阅读