前言：element <el-dialog> 标签有自带的动画效果，要想自定义动画效果，需要覆盖自带效果，分为两类：
1.全局设置
如要设置左侧或上下弹出，只需全局样式 处粘贴如下代码：
@keyframes dialog-fade-in {
0% {
transform: translate3d(100%,0 , 0);
opacity: 0;
}
100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes dialog-fade-out {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
100% {
transform: translate3d(100%,0 , 0);
opacity: 0;
}
}
其中 translate3d（x,y,z） 我这是修改的x（第一位）的值100%到0的切换，如果想实现上下弹出，只需修改y处（第二位）的值
2.局部设置
<el-dialog custom-class="way" > 标签上添加 custom-class=“自定义类名” ，然后通过自定义类名设置指定弹窗的动画效果
，然后全局样式处粘贴代码如下：
.el-dialog__wrapper { transition-duration: .3s;}.dialog-fade-enter-active{ animation: none !important;}.dialog-fade-leave-active { transition-duration: .2s !important; animation: none !important;}
.dialog-fade-enter-active .el-dialog.way{ animation: anim-open .3s;}.dialog-fade-leave-active .el-dialog.way{ animation: anim-close .3s;}@keyframes anim-open { 0% { transform: translate3d(100%, 0, 0); opacity: 0; } 100% { transform: translate3d(0, 0, 0); opacity: 1; }}@keyframes anim-close { 0% { transform: translate3d(0, 0, 0); opacity: 1; } 100% { transform: translate3d(100%, 0, 0); opacity: 0; }}
原文地址：https://www.cnblogs.com/hlq-home/p/11022814.html