使用 CSS 动画显示和隐藏

Question

我的目标是在显示和隐藏 HTML 元素时创建动画。显示和隐藏由切换类隐藏的按钮触发。

这是我的代码：

const button = document.querySelector('button');
const box = document.querySelector('.box');

button.addEventListener('click', () => {
  box.classList.toggle('hide');
})

.box {
  width:200px;
  height: 200px;
  border: 1px solid #000;
  background-color: gray;
  margin: 0 auto;
  opacity: 1;
  display: block;  
}

.hide {
  display: none;
  transition: all 1s ease-out;
  opacity: 0;  
}

<button>Show / Hide</button>
<div class="box hide"></div>

Answer 1

如果你想使用动画不使用display:none，你可以使用visibility

const button = document.querySelector('button');
const box = document.querySelector('.box');

button.addEventListener('click', () => {
  box.classList.toggle('hide');
})

.box {
  width:200px;
  height: 200px;
  border: 1px solid #000;
  background-color: gray;
  margin: 0 auto;
  opacity: 1;
  transition: all 1s ease-out;
  visibility: visible;  
}

.hide {
  visibility: hidden;
  transition: all 1s ease-out;
  opacity: 0;  
}

<button>Show / Hide</button>
<div class="box hide"></div>