踩下油门，尽情探索 el-dialog 的自定义出场动画

2023-10-12 00:16:52

前言

在构建现代化应用时，为用户提供精致且富有互动性的界面至关重要。当谈到创建优雅且引人入胜的弹出窗口时，el-dialog 组件在 vue2 生态系统中脱颖而出。然而，如果您希望为 el-dialog 注入更多活力，使其出场动画与众不同，那么您需要进行一些探索。

开启自定义动画之旅

动画概览

el-dialog 的出场动画分为两个阶段：打开和关闭。打开动画是从隐藏状态过渡到可见状态，而关闭动画则相反。为了实现自定义动画，我们需要针对这两个阶段分别进行设置。

打开动画

打开动画通常使用过渡效果来实现。过渡效果可以平滑地将元素从一种状态过渡到另一种状态。在 vue2 中，我们可以通过使用 transition 和 transition-group 指令来实现过渡效果。

<el-dialog v-if="dialogVisible" @open="handleOpen" :transition="dialogOpenTransition">
  ...
</el-dialog>

在上面的代码中，dialogOpenTransition 是一个自定义的过渡名称。我们可以通过在样式表中定义这个过渡名称来指定打开动画的效果。

.dialog-open-transition {
  transition: all 0.3s ease-in-out;
}

.dialog-open-enter {
  transform: scale(0);
  opacity: 0;
}

.dialog-open-enter-active {
  transform: scale(1);
  opacity: 1;
}

在这个例子中，我们使用 transform 和 opacity 属性来创建缩放和淡入的动画效果。

关闭动画

关闭动画的实现与打开动画类似，但我们需要使用不同的过渡名称和样式。

<el-dialog v-if="dialogVisible" @open="handleOpen" @close="handleClose" :transition="dialogCloseTransition">
  ...
</el-dialog>

.dialog-close-transition {
  transition: all 0.3s ease-in-out;
}

.dialog-close-leave {
  transform: scale(1);
  opacity: 1;
}

.dialog-close-leave-active {
  transform: scale(0);
  opacity: 0;
}