在窗口调整大小更改类
问题描述:
我需要更改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
答
变化下一个代码:
element.classList.add('no-transition');
setTimeout(() => {
element.classList.remove('big', 'small');
element.classList.add(currentClass);
setTimeout(() => {
element.classList.remove('no-transition');
}, 0);
}, 0);
BTW对铬我看到你的榜样的过渡,而不是与这种变化
是的,现在它有类之间的过渡改变了,我想删除它。 您的解决方案有效。谢谢! 但有时,很少,我看到在改变过渡。 – Kholiavko
玩值“0”,尝试50或100 – UXDart
好吧,我会尝试,谢谢! – Kholiavko