我需要在寡妇调整大小事件上更改 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 将不可见,之后将添加第二个类,div 将变得可见,无需过渡。
我怎样才能避免这种情况?
这是我的 CodePen
最佳答案
更改下一个代码:
element.classList.add('no-transition');
setTimeout(() => {
element.classList.remove('big', 'small');
element.classList.add(currentClass);
setTimeout(() => {
element.classList.remove('no-transition');
}, 0);
}, 0);
顺便说一句,在 Chrome 上,我看到了您示例中的过渡,但没有进行此更改
关于javascript - 更改窗口大小时的类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44249384/