html下移属性设置,css下移动画该怎么实现呢？

写了个 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

})