我試圖用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 無限。
}
@keyframes load {
0%{ left: -100%]
100%{ left: 150%}。
這里是jquery
。$(window) 。 on("load"/span>, function() {
$("#press").fadeOut("慢")。
$("[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>
uj5u.com熱心網友回復：
也許可以試試這個解決方案：
css:.noAnimation {
animation: none;
//or
animation-play-state: paused;
}
js:
$("#press"/span>)。 fadeOut("slow"/span>, function() {
$("[data-placeholder]").addClass('noAnimation') 。
});
另一個解決方案：
js:
$("#press") 。 fadeOut("slow"/span>, function() {
$("[data-placeholder]").remove()。
});
uj5u.com熱心網友回復：
偽元素是Shadow DOM的一部分，所以它們不能被直接修改。然而，你可以使用類來修改它們，這里有一個解決方法。
jQuery
$(function () { // document ready state
$("[data-placeholder]").addClass（'stop-animation'）。
});
CSS
.stop-animation: after {
animation: none !important;
uj5u.com熱心網友回復：
不可能直接使用javascript來針對::after偽元素，因為它是DOM的一部分。
你可以嘗試的一個解決方案是在html的head或body上附加一個包含確切css的樣式標簽。
像這樣：
$("body"/span>)。 append('<style>[data-placeholder]:after{animation:none}</style> ')。
在上面的解決方案中，選擇器是直接針對css要求的。
因此，最終的javascript將看起來像這樣：
$(window) 。 on("load"/span>, function() {
$("#press").fadeOut("慢")。
$("body").append('<style> [data-placeholder]:after{animation:none}</style> ')。
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/306722.html
標籤：