javascript - 更改窗口大小时的类

Question

我需要在寡妇调整大小事件上更改 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 将变得可见，无需过渡。

但现在我的类(class)之间的转换发生了变化:

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

这是我的 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);

顺便说一句，在 Chrome 上，我看到了您示例中的过渡，但没有进行此更改