覆盖(优化效果)el-dialog 的显示隐藏动画

本文介绍如何通过自定义CSS代码,为Element-UI的弹窗组件添加平滑的过渡动画效果,包括淡入淡出及缩放动画,显著提升用户体验。

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

转载于:https://juejin.im/post/5c8a4e6be51d4523c06c6a26

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值