使用 JQuery（动画）更改 CSS

Posted 2023-05-08

【中文标题】使用 JQuery（动画）更改 CSS

【英文标题】：Change CSS using JQuery (Animation)

【发布时间】：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 占位符的单独类来覆盖动画（如果使用）？

是的，没错，我已经在我的回答中解释过了。

【参考方案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]:afteranimation:none</style>');

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

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

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

【讨论】：

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