elementUI 弹窗组件全局和局部 弹入弹出动画效果实现

前言：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&