html - css transitions "triggers"浏览器调整大小

Question

当您通过媒体查询从移动优先转到桌面时，我不知道如何避免执行 css 转换。

我想在悬停时进行过渡，但也希望当您将鼠标悬停在 svg Logo 等上时。我有一个较小的移动 Logo ，较大的桌面 Logo 。但是过渡会影响新的宽度并触发悬停过渡。

知道如何在通过媒体查询应用新样式时取消转换为“执行”。

我已经针对我的问题做了一个例子。

http://jsfiddle.net/yw2L2u7s/

<div class="logo"></div>

.logo {
    width:100px;
    height:100px;
    background: red;
}
@media only screen and (min-width: 525px) {
    .logo {
        width:200px;
        height:200px;
        background: blue;
    }

    .logo:hover {
        background: yellow;
    }

    .logo {
        -webkit-transition: ease 0.5s;
        -moz-transition: ease 0.5s;
        -ms-transition: ease 0.5s;
        -o-transition: ease 0.5s;
        transition: ease 0.5s;
    }
}

Answer 1

我遇到了同样的问题，最后我用一些javascript代码解决了它。

代码解释: 当窗口调整大小时，它向body元素添加stop-transition类。短暂超时后，它会删除此类。

stopResponsiveTransition();

function stopResponsiveTransition() {
  const classes = document.body.classList;
  let timer = null;
  window.addEventListener('resize', function () {
    if (timer){
      clearTimeout(timer);
      timer = null;
    }else {
      classes.add('stop-transition');
    }
    timer = setTimeout(() => {
      classes.remove('stop-transition');
      timer = null;
    }, 100);
  });
}

同时将此规则添加到您的 CSS 表中。它在调整大小时重置所选元素的过渡属性。在调整大小事件(短超时)后，此类被删除，因此不遵守下面的规则，并且转换再次适用于该元素上的所有用户操作。

body.stop-transition #some-grid-container{
  transition: none !important;
}