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

Posted 2022-01-08 hlq-home

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