Раскрывающийся список с использованием масштаба (0) вместо отображения: нет

Question

Я создал выпадающее меню с масштабом (0) для масштабирования (1) и не использовал display: none и display: block / flex.

Насколько я знаю, чтобы анимировать его так же, как сейчас, нужно дать setTimeout (animationFn, 20) после изменения отображения раскрывающегося списка на блок.Так как было бы слишком много кода, я попробовал это и не увидел никаких проблем.

Так что мне любопытно, если это все равно создает какие-либо проблемы?

let ddBtn = document.querySelector('.dropdown-btn');
let ddList = document.querySelector('.dropdown-list');

ddBtn.addEventListener('click', function() {
  
  ddList.classList.toggle('is-active');
  ddBtn.classList.toggle('dropdown-active');
  
});

document.addEventListener('click', closeDD);

function closeDD (e) {
  
  if (ddBtn.classList.contains('dropdown-active') && !e.target.classList.contains('dropdown-active')) {
    ddList.classList.remove('is-active');
    ddBtn.classList.remove('dropdown-active');
  }
  
}

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.nav {
  background: #000;
  color: #f2f2f2;
  display: flex;
}

.nav-link {
  text-decoration: none;
  color: #f2f2f2;
  padding: 1rem 2rem;
  transition: 250ms;
}

.nav-link:hover {
  background: #222;
}

.nav-list {
  list-style-type: none;
  padding-left: 0;
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
}

.nav-item {
  display: flex;
}

.dropdown {
  position: relative;
}

.dropdown-list {
  display: flex;
  flex-direction: column;
  list-style-type: none;
  padding-left: 0;
  position: absolute;
  top: 100%;
  background: #000;
  opacity: 0.00000001;
  transform: scale(0);
  transform-origin: top left;
  transition: 250ms ease-in-out;
}

.dropdown-item {
  display: flex;
}

.dropdown-link {
  padding: 1rem 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #f2f2f2;
  transition: 250ms;
}

.dropdown-link:hover {
  background: #222;
}

.dropdown-active {
  background: #222;
}

.is-active {
  transform: scale(1);
  opacity: 1;
}

.section {
  min-height: 100vh;
  background: #eee url('https://unsplash.it/800/599') center center no-repeat;
  background-size: cover;
  display: grid;
  place-items: center;
}

<header class="header">
  <nav class="nav">
    
    <a href="#" class="nav-link">
      LOGO
    </a>
    
    <ul class="nav-list">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      
      <li class="nav-item">
        <a class="nav-link" href="#">Products</a>
      </li>
      
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-btn" href="#">Dropdown</a>
        
        <ul class="dropdown-list">
          <li class="dropdown-item">
            <a href="#" class="dropdown-link">Link 1</a>
          </li>
          <li class="dropdown-item">
            <a href="#" class="dropdown-link">Link 2</a>
          </li>
          <li class="dropdown-item">
            <a href="#" class="dropdown-link">Link 3</a>
          </li>
        </ul>
      </li>
      
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      
      <li class="nav-item">
        <a class="nav-link" href="#">Conact</a>
      </li>
    </ul>
    
  </nav>
</header>

<section class="section">
  <h2>Hero Content</h2>
</section>