CSS3下拉菜单可以淡入和淡出吗？

.dropdown {
  transition: width 0.2s ease-out;
}

.dropdown.open {
  width: 150px;
}

<div class="dropdown open">
  <button class="dropdown-btn">Dropdown</button>
  <div class="dropdown-content">
    ...
  </div>
</div>

// 获取下拉菜单和按钮元素
const dropdown = document.querySelector('.dropdown');
const dropdownBtn = document.querySelector('.dropdown-btn');

// 添加单击事件监听器
dropdownBtn.addEventListener('click', function() {
  // 如果下拉菜单处于关闭状态，则打开菜单
  if (!dropdown.classList.contains('open')) {
    dropdown.classList.add('open');
  }
});