Question

可以通过在JavaScript中使用classList或类似的东西来触发* css元素吗？

在我的CSS中，我写了以下内容，以禁用网站范围内的所有 CSS动画：

* {
    transition: none !important;
    transition-property: none !important;
    transform: none !important;
    animation: none !important;
}

这很好用，但是我想通过JavaScript触发它，所以我可以启用或禁用动画。

我做了以下事情：

*.animationsDisabled {
    transition: none !important;
    transition-property: none !important;
    transform: none !important;
    animation: none !important;
}

在我的HTML文档的末尾（在<body>内），我写道：

<script>
    document.body.classList.add('animationsDisabled');
</script>

似乎当我加载页面时，Chrome会识别我所做的事情，并在开发人员部分的CSS中显示，但所有CSS动画仍然有效。

为什么这不起作用，我能做些什么呢？（如果可能的话，没有jQuery）

Answer 1

*.animationsDisabled定位拥有 css类animationsDisabled的所有元素。另请注意，*.cssClass在功能上与.cssClass的css选择器相同。

你想要的是

.animationsDisabled * { 
  transition-property: none !important;
  transform: none !important;
  animation: none !important;
}

将任何元素作为css类animationsDisabled的元素的后代。

编辑：请检查您体内的任何元素是否在检查器中都有这些规则：

如果在检查器中看不到这些规则，则表明您没有按照本答案（或下面的答案）中的建议正确应用CSS。

Answer 2

你正在寻找错误的观点。要禁用动画，您需要使用

body.animationsDisabled * {
    -webkit-transition-property: none !important;
    transition-property: none !important;
    -webkit-transform: none !important;
            transform: none !important;
    -webkit-animation: none !important;
            animation: none !important;     
}

然后通过删除课程，您应该可以恢复动画。

编辑：如果您还要为body制作动画，则类名应为：

body.animationsDisabled, body.animationsDisabled * { }

function toggleAnim()
{
  if(hasClass(document.body,"animationsDisabled")) {
     removeClass(document.body,"animationsDisabled");
  } else {
    addClass(document.body,"animationsDisabled");
  }
}

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(ele, cls) {
    if (!hasClass(ele, cls)) ele.className += " " + cls;
}
function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

body.animationsDisabled * {
    transition-property: none !important;
    transform: none !important;
    animation: none !important;
    -webkit-animation: none !important;
}

.animated {
  -webkit-animation: animation 500ms linear infinite both;
  animation: animation 500ms linear infinite both;
  transform-origin: 30px 41px 0px;
  position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -30px;
    margin-top: -30px;
    width: 60px;
    height: 60px;
    background: red;
    border-radius: 2px;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes animation { 
  0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  0.64% { -webkit-transform: matrix3d(0.981, 0.216, 0, 0, -0.031, 1.004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.981, 0.216, 0, 0, -0.031, 1.004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  1.28% { -webkit-transform: matrix3d(0.941, 0.359, 0, 0, -0.134, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.941, 0.359, 0, 0, -0.134, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  2.54% { -webkit-transform: matrix3d(0.846, 0.538, 0, 0, -0.407, 0.917, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.846, 0.538, 0, 0, -0.407, 0.917, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  3.78% { -webkit-transform: matrix3d(0.737, 0.676, 0, 0, -0.64, 0.769, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.737, 0.676, 0, 0, -0.64, 0.769, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  4.3% { -webkit-transform: matrix3d(0.683, 0.73, 0, 0, -0.715, 0.699, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.683, 0.73, 0, 0, -0.715, 0.699, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  5.05% { -webkit-transform: matrix3d(0.6, 0.8, 0, 0, -0.801, 0.599, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.6, 0.8, 0, 0, -0.801, 0.599, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  6.29% { -webkit-transform: matrix3d(0.449, 0.893, 0, 0, -0.898, 0.439, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.449, 0.893, 0, 0, -0.898, 0.439, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  8.61% { -webkit-transform: matrix3d(0.191, 0.982, 0, 0, -0.982, 0.188, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.191, 0.982, 0, 0, -0.982, 0.188, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  11.29% { -webkit-transform: matrix3d(-0.01, 1, 0, 0, -1, -0.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.01, 1, 0, 0, -1, -0.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  12.91% { -webkit-transform: matrix3d(-0.082, 0.997, 0, 0, -0.997, -0.082, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.082, 0.997, 0, 0, -0.997, -0.082, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  16.3% { -webkit-transform: matrix3d(-0.144, 0.99, 0, 0, -0.99, -0.144, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.144, 0.99, 0, 0, -0.99, -0.144, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  17.22% { -webkit-transform: matrix3d(-0.146, 0.989, 0, 0, -0.989, -0.146, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.146, 0.989, 0, 0, -0.989, -0.146, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  20% { -webkit-transform: matrix3d(-0.13, 0.991, 0, 0, -0.991, -0.13, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.13, 0.991, 0, 0, -0.991, -0.13, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  28.33% { -webkit-transform: matrix3d(-0.032, 0.999, 0, 0, -0.999, -0.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.032, 0.999, 0, 0, -0.999, -0.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  39.44% { -webkit-transform: matrix3d(0.01, 1, 0, 0, -1, 0.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.01, 1, 0, 0, -1, 0.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  61.66% { -webkit-transform: matrix3d(-0.001, 1, 0, 0, -1, -0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.001, 1, 0, 0, -1, -0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  83.98% { -webkit-transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { -webkit-transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
}

@keyframes animation { 
  0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  0.64% { -webkit-transform: matrix3d(0.981, 0.216, 0, 0, -0.031, 1.004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.981, 0.216, 0, 0, -0.031, 1.004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  1.28% { -webkit-transform: matrix3d(0.941, 0.359, 0, 0, -0.134, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.941, 0.359, 0, 0, -0.134, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  2.54% { -webkit-transform: matrix3d(0.846, 0.538, 0, 0, -0.407, 0.917, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.846, 0.538, 0, 0, -0.407, 0.917, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  3.78% { -webkit-transform: matrix3d(0.737, 0.676, 0, 0, -0.64, 0.769, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.737, 0.676, 0, 0, -0.64, 0.769, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  4.3% { -webkit-transform: matrix3d(0.683, 0.73, 0, 0, -0.715, 0.699, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.683, 0.73, 0, 0, -0.715, 0.699, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  5.05% { -webkit-transform: matrix3d(0.6, 0.8, 0, 0, -0.801, 0.599, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.6, 0.8, 0, 0, -0.801, 0.599, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  6.29% { -webkit-transform: matrix3d(0.449, 0.893, 0, 0, -0.898, 0.439, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.449, 0.893, 0, 0, -0.898, 0.439, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  8.61% { -webkit-transform: matrix3d(0.191, 0.982, 0, 0, -0.982, 0.188, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.191, 0.982, 0, 0, -0.982, 0.188, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  11.29% { -webkit-transform: matrix3d(-0.01, 1, 0, 0, -1, -0.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.01, 1, 0, 0, -1, -0.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  12.91% { -webkit-transform: matrix3d(-0.082, 0.997, 0, 0, -0.997, -0.082, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.082, 0.997, 0, 0, -0.997, -0.082, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  16.3% { -webkit-transform: matrix3d(-0.144, 0.99, 0, 0, -0.99, -0.144, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.144, 0.99, 0, 0, -0.99, -0.144, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  17.22% { -webkit-transform: matrix3d(-0.146, 0.989, 0, 0, -0.989, -0.146, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.146, 0.989, 0, 0, -0.989, -0.146, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  20% { -webkit-transform: matrix3d(-0.13, 0.991, 0, 0, -0.991, -0.13, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.13, 0.991, 0, 0, -0.991, -0.13, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  28.33% { -webkit-transform: matrix3d(-0.032, 0.999, 0, 0, -0.999, -0.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.032, 0.999, 0, 0, -0.999, -0.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  39.44% { -webkit-transform: matrix3d(0.01, 1, 0, 0, -1, 0.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.01, 1, 0, 0, -1, 0.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  61.66% { -webkit-transform: matrix3d(-0.001, 1, 0, 0, -1, -0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(-0.001, 1, 0, 0, -1, -0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  83.98% { -webkit-transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { -webkit-transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
}

<body class="">
  <div class="animated">
    
  </div>
  <button id="test" onclick="toggleAnim()">Test Animation</button>
</body>

在JavaScript中触发*的classList

2 个答案: