在调整窗口大小时禁用 CSS 过渡？答案

【问题标题】：Disable CSS transitions on window resize?在调整窗口大小时禁用 CSS 过渡？
【发布时间】：2019-05-29 02:17:49
【问题描述】：

我很惊讶我找不到任何解决方案。我有四个方形 div，它们在全屏时排成一行，在移动设备大小的 2x2 网格中。它们通过点击时的 CSS 过渡来改变颜色。

但是当我调整我的窗口大小时，它们会在页面周围浮动到它们的新位置 - 这是 CSS 过渡的不希望的副作用。我尝试在调整大小时使用 JQuery 切换转换，以防止它们浮动，但是当您停止调整大小时，转换类有 50% 的机会处于非活动状态！

我没有在这里放任何代码，因为这似乎是一个简单的问题。有没有人有任何简单的解决方案？

【问题讨论】：

为此目的使用媒体查询
如果您不了解媒体查询，请告诉我
你能在 javascript 的 resize 事件中重置状态吗？您还可以对转换使用小超时，然后取消调整大小事件的超时。

标签： jquery css

【解决方案1】：

当窗口调整大小时，我们可以在

中添加一个特殊的 CSS 类“stop-transitions”。在调整大小和短暂超时后，我们删除了这个类。把它放在结束标签 : 之前

<script>
    (function() { 
        const classes = document.body.classList;
        let timer = 0;
        window.addEventListener('resize', function () {
            if (timer) {
                clearTimeout(timer);
                timer = null;
            }
            else
                classes.add('stop-transitions');

            timer = setTimeout(() => {
                classes.remove('stop-transitions');
                timer = null;
            }, 100);
        });
    })();
</script>

并在您的 CSS 旁边添加。它在调整大小期间重置所有的转换属性。调整大小和短暂超时后，该类将被删除，并且转换再次起作用。

body.stop-transitions * {
  transition: none !important;
}

【讨论】：

【解决方案2】：

如果您使用transition: all 200ms ease-out 而不是transition: color 200ms ease-out，则您将转换应用于所有属性，而不仅仅是一个特定属性。

【讨论】：

...这就是我的简单解决方案！太棒了-谢谢-不敢相信我不知道。