element-ui 自定义弹窗 进入退出动画效果
1.在全局样式 文件中加入下述代码即可
//弹窗自定义 动画
.el-dialog__wrapper {
transition-duration: 0.8s;
}
.dialog-fade-enter-active{
animation: none !important;
}
.dialog-fade-leave-active {
transition-duration: 0.4s !important;//定义 退出时的 动画 过渡时间
animation: none !important;
}
.dialog-fade-enter-active .el-dialog,
.dialog-fade-leave-active .el-dialog{
animation-fill-mode: forwards; //设置 填充模式 此处的值为 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)
}
.dialog-fade-enter-active .el-dialog{
animation-duration: 0.5s;
animation-name: fadeInLeftBig; //设置 进入自定义动画
animation-timing-function: cubic-bezier(0.6,0,0.4,1); // 执行曲线
}
.dialog-fade-leave-active .el-dialog{
animation-duration: 0.5s;
animation-name: zoomOutDown; //设置 退出 自定义动画
}