Question

我很惊讶我找不到任何解决方案。我有四个方形div，全屏显示，移动尺寸为2x2网格。它们会在点击时通过CSS转换更改颜色。

但是当我调整窗口大小时，它们会在页面上浮动到新的位置 - 这是CSS转换的一个不必要的副作用。我尝试使用JQuery在调整大小时切换转换，这使它们不会浮动，但是当你停止调整大小时，转换类有50％的可能性处于非活动状态！

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

Answer 1

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

Answer 2

调整窗口大小时，我们可以在中添加特殊的CSS类“停止过渡”。调整大小和短暂超时后，我们删除了该类。将其放在关闭标签：

之前

<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;
}

在窗口调整大小时禁用CSS转换？

2 个答案: