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=“自定義類名” ，然后通過自定義類名設置指定彈窗的動畫效果

，然后全局樣式處粘貼代碼如下：

.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;
  }
}