element-ui dialog本身的动画效果基本就是没动画效果(摊手)
-
原来的弹窗动画
-
优化后的动画
- 只需加入以下这段css代码,非常简单
.el-dialog__wrapper {
transition-duration: 0.3s;
}
.dialog-fade-enter-active{
animation: none !important;
}
.dialog-fade-leave-active {
transition-duration: 0.15s !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.3s;
animation-name: anim-open;
animation-timing-function: cubic-bezier(0.6,0,0.4,1);
}
.dialog-fade-leave-active .el-dialog{
animation-duration: 0.3s;
animation-name: anim-close;
}
@keyframes anim-open {
0% { opacity: 0; transform: scale3d(0, 0, 1); }
100% { opacity: 1; transform: scale3d(1, 1, 1); }
}
@keyframes anim-close {
0% { opacity: 1; }
100% { opacity: 0; transform: scale3d(0.5, 0.5, 1); }
}
复制代码
GitHub项目链接 vue-element-plus-ui
- less代码路径:src\style\dialog-animation.less
- 示例文件路径:src\exmple\dialogAnimation.vue