Question

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

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

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

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

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

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

Answer 4

您可以在窗口调整大小后使用javascript禁用过渡一秒钟，然后重新启用它（为我工作）：
html：

 <body onresize="ChangeTransition()>
 <div class="logo" id="logo">

javascript：

function ChangeTransition(){
document.getElementById("logo").style.transition = "none";
setTimeout(function(){
document.getElementById("logo").style.transition = "all 0.5s ease";
}, 1000);
}

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

4 个答案: