更改窗口大小的类

Question

我需要在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 - 添加类＆＃39;小＆＃39;否则添加课程＆＃39;大＆＃39;

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

Answer 1

更改下一个代码：

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

btw on chrome我看到了你的例子的过渡，而不是这个改变