在窗口调整大小更改类

我需要更改widows resize事件的className，但我需要更改类之间没有任何转换。在窗口调整大小更改类

这是我的逻辑：

1）默认情况下使div不可见。

<div></div> 

div { 
    display: none; 
    height: 150px; 
    background: #3763ff; 
}

2）当添加类之一 - 使其可见

.big { 
    display: block; 
    width: 100%; 
    transition: .3s ease-out; 
} 

.small { 
    display: block; 
    width: 250px; 
    transition: .3s ease-in-out; 
}

3）在调整大小事件中，我检查，如果屏幕宽度小则768 - 添加类“小”别人添加类“大”

var element = document.querySelector('div'); 

element.classList.add('big'); 

window.addEventListener('resize', function() { 
    var currentWidth = Math.min(window.innerWidth || Infinity, screen.width), 
     currentClass = currentWidth > 768 ? 'big' : 'small'; 

    element.classList.add('no-transition'); 
    element.classList.remove('big', 'small'); 
    element.classList.add(currentClass); 
    element.classList.remove('no-transition'); 
});

我预计再一类将被删除，在这一刻格是不可见，并在此之后，第二类将被添加和DIV将变得可见，没有过渡。

但现在我真的类之间的过渡变化：

我怎样才能避免这种情况？

这里是我的CodePen

来源

2017-05-29 Kholiavko

变化下一个代码：

element.classList.add('no-transition'); 
    setTimeout(() => { 
    element.classList.remove('big', 'small'); 
    element.classList.add(currentClass); 
    setTimeout(() => { 
     element.classList.remove('no-transition'); 
    }, 0); 
    }, 0);

BTW对铬我看到你的榜样的过渡，而不是与这种变化

来源

2017-05-29 19:40:47 UXDart

是的，现在它有类之间的过渡改变了，我想删除它。您的解决方案有效。谢谢！但有时，很少，我看到在改变过渡。 – Kholiavko

玩值“0”，尝试50或100 – UXDart

好吧，我会尝试，谢谢！ – Kholiavko

在窗口调整大小更改类

回答

相关问题