element标签弹窗_elementUI 弹窗组件全局和局部 弹入弹出动画效果实现

前言：element   标签有自带的动画效果，要想自定义动画效果，需要覆盖自带效果，分为两类：

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.局部设置

  标签上添加  custom-class=“自定义类名” ，然后通过自定义类名设置指定弹窗的动画效果

，然后全局样式处粘贴代码如下：

.el-dialog__wrapper {

transition-duration: .3s;