TaoLer/public/static/component/pear/css/module/layer.css

.layui-layer-msg {
	border-color: transparent !important;
	box-shadow: 2px 0 6px rgb(0 21 41 / 0.04) !important;
}

/* 扩展动画开始 */
.pear-drawer.layui-layer {
	border-radius: 0 !important;
	overflow: auto;
}

.pear-drawer.layui-layer.position-absolute {
	position: absolute !important;
}
.pear-drawer-anim,
.pear-drawer-anim.layui-anim {
	-webkit-animation-duration: .3s;
	animation-duration: .3s;
	-webkit-animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1);
	animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1);
}

/* right to left */
@keyframes layer-rl {
	from {
		-webkit-transform: translate3d(100%, 0, 0);
		-ms-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
		opacity: 1;

	}

	to {
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

@-webkit-keyframes layer-rl {
	from {
		-webkit-transform: translate3d(100%, 0, 0);
		-ms-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
		opacity: 1;

	}

	to {
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

.layer-anim-rl {
	-webkit-animation-name: layer-rl;
	animation-name: layer-rl;
}

/* right to left close */
@keyframes layer-rl-close {
	from {
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	to {
		-webkit-transform: translate3d(100%, 0, 0);
		-ms-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
	}
}

@-webkit-keyframes layer-rl-close {
	from {
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);

	}

	to {
		-webkit-transform: translate3d(100%, 0, 0);
		-ms-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
	}
}

.layer-anim-rl-close,
.layer-anim-rl.layer-anim-close {
	-webkit-animation-name: layer-rl-close;
	animation-name: layer-rl-close;
}

/* left to right */
@-webkit-keyframes layer-lr {
	from {
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1
	}

	to {
		-webkit-transform: translate3d(-100%, 0, 0);
		-ms-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
		opacity: 1
	}
}

@keyframes layer-lr {
	from {
		-webkit-transform: translate3d(-100%, 0, 0);
		-ms-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
		opacity: 1
	}

	to {
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1
	}
}

.layer-anim-lr {
	-webkit-animation-name: layer-lr;
	animation-name: layer-lr
}

/* left to right close */
@-webkit-keyframes layer-lr-close {
	from {
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	to {
		-webkit-transform: translate3d(-100%, 0, 0);
		-ms-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
	}
}

@keyframes layer-lr-close {
	from {
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	to {
		-webkit-transform: translate3d(-100%, 0, 0);
		-ms-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
	}
}

.layer-anim-lr-close,
.layer-anim-lr.layer-anim-close {
	-webkit-animation-name: layer-lr-close;
	animation-name: layer-lr-close
}

/* top to bottom */
@-webkit-keyframes layer-tb {
	from {
		-webkit-transform: translate3d(0, -100%, 0);
		-ms-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
		opacity: 1;
		animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1);
	}

	to {
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
		animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1);
	}
}

@keyframes layer-tb {
	from {
		-webkit-transform: translate3d(0, -100%, 0);
		-ms-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
		opacity: 1;
		animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1);
	}

	to {
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
		animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1);
	}
}

.layer-anim-tb {
	-webkit-animation-name: layer-tb;
	animation-name: layer-tb
}

/* top to bottom close */
@-webkit-keyframes layer-tb-close {
	from {
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	to {
		-webkit-transform: translate3d(0, -100%, 0);
		-ms-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
	}
}

@keyframes layer-tb-close {
	from {
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	to {
		-webkit-transform: translate3d(0, -100%, 0);
		-ms-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
	}
}

.layer-anim-tb-close,
.layer-anim-tb.layer-anim-close {
	-webkit-animation-name: layer-tb-close;
	animation-name: layer-tb-close
}

/* bottom to top */
@-webkit-keyframes layer-bt {
	from {
		-webkit-transform: translate3d(0, 100%, 0);
		-ms-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
		opacity: 1
	}

	to {
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1
	}
}

@keyframes layer-bt {
	from {
		-webkit-transform: translate3d(0, 100%, 0);
		-ms-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
		opacity: 1
	}

	to {
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1
	}
}

.layer-anim-bt {
	-webkit-animation-name: layer-bt;
	animation-name: layer-bt
}

/* bottom to top close */
@-webkit-keyframes layer-bt-close {
	from {
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	to {
		-webkit-transform: translate3d(0, 100%, 0);
		-ms-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
	}
}

@keyframes layer-bt-close {
	from {
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);

	}

	to {
		-webkit-transform: translate3d(0, 100%, 0);
		-ms-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);

	}
}

.layer-anim-bt-close,
.layer-anim-bt.layer-anim-close {
	-webkit-animation-name: layer-bt-close;
	animation-name: layer-bt-close
}

/* 扩展动画结束 */