更改窗口大小调整类

Question

I need to change className on widows resize event, but I need change class without any transition between.

Here is my logic:

1) By default make div invisible.

<div></div>

div {
   display: none; 
   height: 150px;
   background: #3763ff;
}

2) When one of class added - make it visible

.big {
  display: block;
  width: 100%;
  transition: .3s ease-out;
}

.small {
  display: block;
  width: 250px;
  transition: .3s ease-in-out;
}

3) On resize event I check if screen width smaller then 768 - add class 'small' else add class 'big'

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');
});

I expected then one class will be removed, in this moment div will be invisible, and after this the second class will be added and div will become visible, without transition.

But now I have transition between class changed:

How I can avoid this ?

Here is my CodePen

Answer 1

change the next code:

  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 I saw the transition on your example, not with this change