css上下动画 和淡化

.popup_hidden_bg {

transition: opacity .5s ease-out;

opacity: 0;

pointer-events: none;

/* 防止在隐藏时仍然能点击 */

}

@keyframes popupShop {

from {

transform: translateY(100%);

opacity: 0;

}

to {
	transform: translateY(0);
	opacity: 1;
}

}

@keyframes popupHidden {

from {

transform: translateY(0);

opacity: 1;

}

to {
	transform: translateY(100%);
	opacity: 0;
}

}

.openPopup {

animation: popupShop .5s forwards;

}

.hiddenPopup {

animation: popupHidden .5s forwards;

}