el-dialog 添加关闭动画

要为 el-dialog 添加关闭动画，您可以使用 close-before 事件和动画效果来实现。下面是一种方法：

1. 首先，在 el-dialog 标签上添加 @close-before 事件监听器，并绑定一个关闭动画的方法。

html：

<el-dialog @close-before="beforeDialogClose" :visible.sync="dialogVisible">

  对话框内容

</el-dialog>

1. 创建一个方法（例如 beforeDialogClose），在该方法中执行关闭动画，并在动画完成后调用 done 函数以继续关闭对话框。

javascript：

methods: {

beforeDialogClose(done) {

// 执行关闭动画

// 可以使用第三方动画库或自定义 CSS 过渡效果

// 这里以使用 Element Plus 的过渡类名为例

this.$refs.dialog.$el.classList.add('el-zoom-out-center');

// 延迟一段时间等待动画完成

setTimeout(() => {

// 动画完成后调用 done 函数关闭对话框

done();

}, 300);

// 根据实际情况调整延迟时间

} }

1. 在 CSS 中定义相应的关闭动画效果，可以使用过渡类名或自定义 CSS 过渡属性。

css：

.el-zoom-out-center {

animation: el-zoom-out-center 0.3s;

}

@keyframes el-zoom-out-center {

from {

opacity: 1; transform: scale(1);

}

to {

opacity: 0; transform: scale(0);

} }

以上方法使用了 Element Plus 的过渡类名 el-zoom-out-center 和 CSS 动画 el-zoom-out-center，您可以根据需要自定义动画效果和类名。

这样，在对话框关闭时，将触发 close-before 事件并执行关闭动画，待动画完成后再关闭对话框，从而实现在 el-dialog 上添加关闭动画的效果。