前言：element <el-dialog> 标签有自带的动画效果，要想自定义动画效果，须要覆盖自带效果，分为两类：动画
1.全局设置3d
如要设置左侧或上下弹出，只需全局样式 处粘贴以下代码：orm
@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% {ci
transform: translate3d(100%,0 , 0);element
opacity: 0;
}
}animation
其中 translate3d（x,y,z） 我这是修改的x（第一位）的值100%到0的切换，若是想实现上下弹出，只需修改y处（第二位）的值it
2.局部设置io
<el-dialog custom-class="way" > 标签上添加 custom-class=“自定义类名” ，而后经过自定义类名设置指定弹窗的动画效果form
，而后全局样式处粘贴代码以下：class
.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; }}