有没有办法让列表视图在单击按钮时以幻灯片动画的形式出现？

<button id="showListButton">显示列表</button>
<ul id="listView">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
  <li>项目4</li>
</ul>

#listView {
  display: none; /* 初始状态隐藏列表视图 */
  /* 或者可以使用 opacity: 0; 实现隐藏效果 */
  /* 这里可以设置列表视图的样式，如背景颜色、字体等 */
}

#listView.show {
  display: block; /* 显示列表视图 */
  /* 或者可以使用 opacity: 1; 实现渐显效果 */
  /* 这里可以设置过渡或动画的效果 */
}

var showListButton = document.getElementById('showListButton');
var listView = document.getElementById('listView');

showListButton.addEventListener('click', function() {
  listView.classList.add('show');
});