写了个 demo ，希望对你有用。
Document
html,
body {
margin: 0;
padding: 0;
background: #333;
}
.popup {
width: 100%;
top: auto;
right: auto;
bottom: 0;
left: 50%;
position: fixed;
background: #fff;
top: 50%;
left: 50%;
backface-visibility: hidden;
transition: .2s ease-out;
transform: translate3d(-50%, 100%, 0);
}
显示/隐藏
嘻嘻嘻嘻嘻
const button = document.querySelector('button'),
popup = document.querySelector('.popup');
let show = true
button.addEventListener('click', function() {
if (show) {
popup.style.transform = 'translate3d(-50%, 0, 0)'
} else {
popup.style.transform = 'translate3d(-50%, 100%, 0)'
}
show = !show
})