使用scale（0）而不是display：none下拉

Question

我已经建立了一个带缩放（0）到缩放（1）的下拉菜单，并且没有使用display：none和display：block / flex。

据我所知，以与现在相同的方式为其设置动画是在将下拉列表显示为块后给出setTimeout（animationFn，20）。因为代码太多我试过这个并且看不到任何问题。

所以我很好奇这是否会造成任何问题？

＆＃13;

＆＃13;

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

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;