在窗口調整大小更改類

我需要更改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

在窗口調整大小更改類

回答

相關問題