删除操作的确认弹窗怎么加过渡动画才不闪屏？

慕容国玲提问于 2026-03-24 12:04:23 阅读 15

交互

我在做一个后台管理页面，点击删除按钮会弹出确认框。现在用的是直接 display: block/none 切换，但感觉特别生硬，想加个淡入淡出效果。试了 opacity 配合 visibility，但元素虽然看不见了还占位置，布局会跳。

下面是我写的 CSS，但动画没生效，而且隐藏时页面还是会闪一下：

.confirm-modal {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.confirm-modal.show {
  opacity: 1;
  visibility: visible;
}

我来解答赞 1 收藏

反馈

1 条解答

设计师若惜 Lv1

直接用 opacity 和 transform 来做过渡，这样不会影响布局，也不会闪屏。看这个改过的 CSS：

.confirm-modal {

  opacity: 0;

  transform: scale(0.9);

  transition: opacity 0.3s ease, transform 0.3s ease;

  pointer-events: none; /* 确保隐藏时不能交互 */

}



.confirm-modal.show {

  opacity: 1;

  transform: scale(1);

  pointer-events: auto; /* 显示时可以交互 */

}

这样应该就不会有闪屏的问题了，动画也顺滑。

2026-03-24 12:06