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

慕容国玲 阅读 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 条解答
设计师若惜
直接用 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