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

标签：ansi   dialog   transform   wrapper   orm   组件   定义   for   log   

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

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

标签：ansi   dialog   transform   wrapper   orm   组件   定义   for   log   

原文地址：https://www.cnblogs.com/hlq-home/p/11022814.html