如何添加显示/隐藏多个带有动画的按钮

<div id="button-container">
  <button id="button1" class="animated-button">按钮1</button>
  <button id="button2" class="animated-button">按钮2</button>
  <button id="button3" class="animated-button">按钮3</button>
</div>

.animated-button {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.animated-button.show {
  opacity: 1;
}

.animated-button.hide {
  opacity: 0;
}

// 获取按钮元素
const buttons = document.querySelectorAll('.animated-button');

// 遍历按钮元素并添加事件监听
buttons.forEach(button => {
  button.addEventListener('click', () => {
    // 切换按钮的显示和隐藏状态
    button.classList.toggle('show');
    button.classList.toggle('hide');
  });
});