CSS 隐藏元素并实现过渡显示效果 (不使用 display, visibility, opacity)

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: scale(0);
  transition: transform 0.5s;
}

.box.show {
  transform: scale(1);
}

const box = document.querySelector('.box');
box.classList.add('show');

在 JS 中，通过给元素添加 'show' 类名来触发过渡显示效果。缩放比例从 0 到 1 的变化会在 0.5 秒内完成，实现了平滑的过渡效果。