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