浏览器调整大小时的CSS转换“触发器”答案

【问题标题】：css transitions "triggers" on browser resize浏览器调整大小时的CSS转换“触发器”
【发布时间】：2015-03-28 19:51:36
【问题描述】：

当您通过媒体查询从移动优先转到桌面时，我无法弄清楚如何避免执行 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;
    }
}

【问题讨论】：

不知道问题出在哪里，只有决定将浏览器大小调整为移动设备大小的人才能看到，而不是移动/平板设备的实际用户
你还没有说你想要转换什么，所以它正在转换所有内容。如果你想转换一件事......告诉它只转换那个属性。
我采取了移动优先的方法。我不想要移动设备和平板电脑的悬停效果，但 @1024px 在我的项目中它会更改为桌面样式，并且我已经在徽标、菜单链接等上应用了悬停效果。但是......当你调整大小时它会触发悬停从让我们说 500 像素到 1024 像素。现场示例：instagib.dk
坦率地说，CSS 过渡的设计方式很难为此提供纯 CSS 解决方案。你最好的选择是假设不是每个桌面访问者都会调整他们的浏览器大小，只是为了看看这种事情是否会发生。我知道，这是一种逃避，但除非你愿意使用 JS，否则没有太多的 CSS 解决方法。
嘿Bolt，是的，看来我只能在 :hover 选择器上应用过渡。我认为用户会生存下来。或者我可以在移动优先的css文件中添加效果...有什么好的方法可以关闭IOS上的悬停状态吗？

标签： html css css-transitions

【解决方案1】：

由于您只是修改背景颜色，只需指定要转换的属性，因此它将是唯一受影响的属性：

.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/

【讨论】：

【解决方案2】：

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

这个应该可以的：

$(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" );

【讨论】：

【解决方案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;
}

【讨论】：

优秀的解决方案，工作愉快。有些人质疑为什么这甚至是必要的，但正是这些微小的差异使一切变得不同

【解决方案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);
}

【讨论】：