暂停/播放每个子元素的所有CSS动画

Question

我正在创建一个仪表板页面，里面充满了CSS动画。从启动(动画进度条)到自定义动画。

当您单击某些元素时，会触发一个接近全屏的模式，该模式与所有动画重叠，因此我希望通过在顶部元素中添加/移除类，并在设置该类时使用CSS暂停所有动画，从而暂时暂停它们(因为可能的性能问题)。

这个解决方案只需使用一行js，就可以在打开模式时切换类。

我的模板看起来有点像这样：

<body>
    <div class="modal">
        <!-- Modal code -->
    </div>
    <div class="app">
        <!-- Template -->
    </div>
</div>

是否可以向.app 中添加类，该类会暂停每个子元素中的每个CSS动画？

附注1：

我知道，您可以使用与我所请求的完全相反的方法:即，将默认的.animation-play类设置为顶级元素之一，并在每个子元素前面加上这个类，然后删除这个类以暂停每个动画。就像：

app.animation-play .somediv .somediv .element {
    // animation code
}
app.animation-play .somediv .element {
    // animation code
}
app.animation-play .somediv .somediv .somediv .somediv .element {
    // animation code
}

但是我必须编辑大量的CSS代码，而且看起来也不太好。

附注2：

我也对JS解决方案开放，但我非常希望采用一种纯CSS的方式来实现这一点。

Answer 1

当将“暂停”类添加到应用程序包装器中时，您可以使用通用选择器来锁定所有内容，但是由于性能影响，仍有许多CSS指针警告不要使用这些选项。

老实说，这些天的影响可能很小，例如，许多CSS重置都会使用它们。

你可以使用这样的东西：

.app.paused * { 
    animation: none; 
}

编辑：

从上面的注释来看，上面的选择器似乎没有足够的优先级覆盖动画，所以添加了‘！重要’。

.app.paused * { 
    animation: none !important;
    transition: none !important; 
}

然而，这通常不是一个好主意，我总是试图避免使用‘！重要’不惜一切代价，因为很难维护样式表与这些选择器到位。如果您可以以更大的优先级覆盖动画，那么最好这样做，而不是使用‘！重要’。

编辑2:

正如您提到的，您对JS解决方案是开放的，这里有一些JS应该清除给定选择器中的所有动画。我不知道这样做对性能的影响是什么，但我在这里添加了它，以防其他人喜欢只使用JS：

let stopAnimationsWrap = document.querySelector('.app');
let stoppedAnims = [];

// Stop animations
document.querySelector('.stop').addEventListener('click', () => {
  let appAllEls = stopAnimationsWrap.querySelectorAll('*');
  let allElsAr = Array.prototype.slice.call(appAllEls);

  allElsAr.forEach((thisEl) => {
    let elClass = thisEl.classList[0];
        let cs = getComputedStyle(thisEl, null);
    let thisAnimation = cs.getPropertyValue('animation-name');

    if (thisAnimation !== 'none') {

      stoppedAnims.push([elClass, {
        'animationName': thisAnimation
      }]);

      thisEl.style.animationName = 'none';
    }
  });
});

// Start animations
document.querySelector('.start').addEventListener('click', () => {

  stoppedAnims.forEach((thisEl) => {
    let domEl = '.' + thisEl[0];

    stopAnimationsWrap.querySelector(domEl).style.animationName = thisEl[1].animationName;
  });
});

Fiddle:

https://jsfiddle.net/vu6javb2/14/

Answer 2

.app {
    -webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */
    animation-play-state: paused;
}

悬停时：

.app:hover {
    -webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */
    animation-play-state: paused;
}