css在浏览器调整大小时转换“触发器”

Question

当你从移动设备首先通过媒体查询进入桌面时，我无法弄清楚如何避免执行css转换。

我希望在悬停时进行转换，但是当你将鼠标悬停在svg徽标上时，我还有一个较小的移动徽标，而且桌面较大。但是过渡会影响新宽度并触发悬停过渡。

任何想法如何在通过媒体查询应用新样式时将转换无效“执行”。

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

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

我有同样的问题，终于找到了解决办法。

这应该工作：

$(document).ready(function(){
   window.onresize = resizePage; 
   resizePage();
});
function resizePage(){
    var width = (window.innerWidth > 0) ? window.innerWidth : document.documentElement.clientWidth;
    if(width >= 525 && width <= 526){ // your page breakpoint happens probably between 525px and 526px width at this range we gonna disable the transition temporarily
        $(".logo").css( "transition-property", "none" ); // temporarily disable the transition on .logo
    } 
    else{
        $(".logo").css( "transition-property", "" ) // else restore the actual transition
    }
}

注意：如果要暂时禁用断点范围内的所有转换，可以使用*选择器，它选择所有元素。

$("*").css( "transition-property", "none" );

Answer 2

因为您只需修改背景颜色，只需指定要转换的属性，这样它就是受影响的唯一属性：

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

    .logo:hover {
        background-color: yellow;
    }

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

在这里小提琴：http://jsfiddle.net/jox15urm/

Answer 3

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

代码说明：调整窗口大小时，会将stop-transition类添加到body元素中。短暂超时后，它将删除此类。

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工作表中。它会在调整大小期间重置所选元素的transition属性。在调整大小事件（短暂超时）之后，将删除此类，因此不会遵循以下规则，并且对此元素上的所有用户操作再次进行转换。

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