element-ui 自定义弹窗 进入退出动画效果

element-ui 自定义弹窗 进入退出动画效果

1.在全局样式 文件中加入下述代码即可

//弹窗自定义 动画
.el-dialog__wrapper {
  transition-duration: 0.8s;   
}
.dialog-fade-enter-active{
  animation: none !important;
}
.dialog-fade-leave-active {
  transition-duration: 0.4s !important;//定义 退出时的 动画 过渡时间
  animation: none !important;
}

.dialog-fade-enter-active .el-dialog,
.dialog-fade-leave-active .el-dialog{
  animation-fill-mode: forwards;  //设置 填充模式   此处的值为 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
}

.dialog-fade-enter-active .el-dialog{
  animation-duration: 0.5s;
  animation-name: fadeInLeftBig;   //设置 进入自定义动画
  animation-timing-function: cubic-bezier(0.6,0,0.4,1);   // 执行曲线
}

.dialog-fade-leave-active .el-dialog{
  animation-duration: 0.5s;
  animation-name: zoomOutDown; //设置  退出 自定义动画
}