perf: image viewer add animation when opening

This commit is contained in:
XPoet 2020-12-31 16:28:39 +08:00
parent 4cdbdd11b4
commit 68cb992469
4 changed files with 33 additions and 24 deletions

View File

@ -1,5 +1,3 @@
<div class="image-viewer-container"> <div class="image-viewer-container">
<div class="img-box">
<img src=""> <img src="">
</div>
</div> </div>

View File

@ -1,30 +1,37 @@
.image-viewer-container { .image-viewer-container {
position: fixed; position: fixed;
right: 0;
left: 0; left: 0;
bottom: 0;
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: $z-index-9;
display: none;
align-items: center;
justify-content: center;
.img-box {
position: relative;
width: 80%;
height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: rgba(0, 0, 0, 0);
visibility: hidden;
z-index: $z-index-8;
padding: 6%;
box-sizing: border-box;
transition();
&.active {
background: rgba(0, 0, 0, 0.5);
visibility: visible;
img {
cursor: zoom-out;
transform: scale(1);
padding: 2px;
background: var(--background-color);
}
}
img { img {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
cursor: pointer; transform: scale(0);
} transition();
} }
} }

View File

@ -169,7 +169,7 @@
img { img {
box-sizing: border-box; box-sizing: border-box;
max-width: 100%; max-width: 100%;
cursor: pointer; cursor: zoom-in;
display: block; display: block;
box-shadow: 0 0 2px var(--shadow-color); box-shadow: 0 0 2px var(--shadow-color);

View File

@ -167,9 +167,13 @@ KEEP.initUtils = () => {
imageViewer() { imageViewer() {
let isBigImage = false; let isBigImage = false;
const showHandle = (dom, isShow) => { const showHandle = (maskDom, isShow) => {
document.body.style.overflow = isShow ? 'hidden' : 'auto'; document.body.style.overflow = isShow ? 'hidden' : 'auto';
dom.style.display = isShow ? 'flex' : 'none'; if (isShow) {
maskDom.classList.add('active');
} else {
maskDom.classList.remove('active');
}
} }
const imageViewerDom = document.querySelector('.image-viewer-container'); const imageViewerDom = document.querySelector('.image-viewer-container');
@ -186,11 +190,11 @@ KEEP.initUtils = () => {
img.addEventListener('click', () => { img.addEventListener('click', () => {
isBigImage = true; isBigImage = true;
showHandle(imageViewerDom, isBigImage); showHandle(imageViewerDom, isBigImage);
targetImg.setAttribute('src', img.getAttribute('src')) targetImg.setAttribute('src', img.getAttribute('src'));
}); });
}); });
} else { } else {
this.pageContainer_dom.removeChild(imageViewerDom) this.pageContainer_dom.removeChild(imageViewerDom);
} }
}, },