HTML 同级元素点击显示隐藏动画效果 - 无需 display:none 或 position

.box1 {
  width: 100px;
  height: 100px;
  background-color: red;
}

.box2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  opacity: 0;
  transition: opacity 1s;
}

const box1 = document.querySelector('.box1');
const box2 = document.querySelector('.box2');

box1.addEventListener('click', () => {
  box2.style.opacity = 1;
});

通过将第二个元素的 opacity 属性设置为 0，使其默认隐藏，并使用过渡属性，在点击第一个元素时将第二个元素的 opacity 属性设置为 1，即可实现点击第一个元素时，第二个元素占据空间并显示的效果。