使用 * 选择器为所有元素切换 CSS 转换按钮

Question

一整天都在试图解决这个问题，但就是无法解决。 这可能是非常简单的事情，但似乎没有任何效果。

我正在使用 Divi 滚动动画。 然而，在某些设备上它们有点太多了，所以我做了一个按钮来关闭它们，通过全局禁用转换。 但是，我也希望能够再次打开它。 我试过toggle ，但没有用。

因为我不是针对样式，所以我不能使用类切换等。它可能需要是样式切换，但在* 。 所以我想知道是否有办法做到这一点； 或者更好的是，如果没有 Jquery，怎么能做到这一点？

这是我试图让它工作的网站。

任何解决方案，真的很感激。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#turnOffNow").click(function(){ $("*").css("transform", "none"); }); }); </script>

 <div id="turnOffNow" style="color:#fff;"> Turn Off Animations </div>

Answer 1

我认为这将解决您的问题。

给你的 CSS 添加一个类：

.notransform * {
    transform: none;
}

将此类附加到页面中的 html 标记中：

$("#turnOffNow").click(function(){
    $("html").toggleClass("notransform");
});

您也可以尝试transform: none !important强制执行此操作。

Answer 2

为了能够打开它，假设你有一些已经消失的内联转换，最好你给他们css class ，这会给他们transform:none !important然后删除它以打开。

示例CSS：

body.no-transform * {transform: none !important}

js (jquery)

function removeTransform(){$('body').addClass("no-transform")}
function backTransform(){$('body').removeClass("no-transform")}

js（香草）

function removeTransform(){document.body.classList.add("no-transform")}
function backTransform(){document.body.classList.remove("no-transform")}