Add transition for image viewer

This commit is contained in:
the1812 2019-12-27 15:59:09 +08:00
parent 1736bd4d53
commit 52f6c63fe0
8 changed files with 21 additions and 10 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -97,7 +97,7 @@
"icon.vue.min.js": "818DBE1043C65CA3BD83F1EAE124D38B272344BA64DECA5B6A55BB7F0C86D19A",
"icons.min.css": "CA6478DC41BEA3E99C45E01D3CD6FC6D05F933D91A3EE9200AD5DC39828E5A17",
"image-resolution.min.js": "0D9679DD7D7CF2709368FC4811F03CC0379EE7286432B98DB7AAB45227D20C76",
"image-viewer.min.css": "0240B0D5C093F5DC4DCC61F45C49D721129C428E93CEFEFADD0A57F0278D7F0F",
"image-viewer.min.css": "0CF849C6546AEBD2E7EB42F42368BC87B95536840F8A364413DB9A6E37AF5EA8",
"image-viewer.min.html": "763742E79923A7918F281AEBB3CEE76FE2A0AE94CACE325AE4BEE1AED451DAEA",
"index.min.html": "94B83D9EBB9005C1286A7E0759A7683932F8DADA20D07E5E9D8FF867B04D4B95",
"keymap.min.js": "513B92053F0B9D7AF32F1A98D30CC49131AF2960BFCA85AAF64AB22CEB17D816",

Binary file not shown.

View File

@ -1 +1 @@
body.image-viewer-opened,html.image-viewer-opened{overflow:hidden!important}.image-viewer-container{background:rgba(0,0,0,.85);width:100%;height:100%;position:fixed;top:0;left:0;z-index:100002;display:none;justify-content:center;align-items:center}.image-viewer-container.opened{display:flex}.image-viewer{width:90%;height:90%;display:grid;grid-template-columns:auto 48px;grid-template-rows:48px auto 48px 12px 48px 18px 48px;grid-template-areas:"image close" "image ." "image copy-link" "image ." "image new-tab" "image ." "image download";grid-column-gap:12px;column-gap:12px;justify-items:center;justify-content:stretch;align-items:center;align-content:stretch}.image-viewer .image{grid-area:image;width:auto;height:auto;max-width:100%;max-height:100%}.image-viewer .close{grid-area:close}.image-viewer .download{grid-area:download}.image-viewer .copy-link{grid-area:copy-link;transform:scale(.95)}.image-viewer .new-tab{grid-area:new-tab;transform:scale(.85)}.image-viewer-icon{cursor:pointer;width:100%;height:100%}.image-viewer-icon svg{max-width:48px;max-height:48px}.image-viewer-icon path{fill:#eee;transition:.2s;transform-origin:center}.image-viewer-icon:hover path{fill:var(--theme-color);transform:scale(1.1)}
body.image-viewer-opened,html.image-viewer-opened{overflow:hidden!important}.image-viewer-container,.image-viewer-container *{transition:.2s ease-out}.image-viewer-container{background:rgba(0,0,0,.85);width:100%;height:100%;position:fixed;top:0;left:0;z-index:100002;display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none}.image-viewer-container.opened{opacity:1;pointer-events:initial}.image-viewer{width:90%;height:90%;display:grid;grid-template-columns:auto 48px;grid-template-rows:48px auto 48px 12px 48px 18px 48px;grid-template-areas:"image close" "image ." "image copy-link" "image ." "image new-tab" "image ." "image download";grid-column-gap:12px;column-gap:12px;justify-items:center;justify-content:stretch;align-items:center;align-content:stretch;transform:scale(.95)}.image-viewer-container.opened .image-viewer{transform:scale(1)}.image-viewer .image{grid-area:image;width:auto;height:auto;max-width:100%;max-height:100%}.image-viewer .close{grid-area:close}.image-viewer .download{grid-area:download}.image-viewer .copy-link{grid-area:copy-link;transform:scale(.95)}.image-viewer .new-tab{grid-area:new-tab;transform:scale(.85)}.image-viewer-icon{cursor:pointer;width:100%;height:100%}.image-viewer-icon svg{max-width:48px;max-height:48px}.image-viewer-icon path{fill:#eee;transition:.2s;transform-origin:center}.image-viewer-icon:hover path{fill:var(--theme-color);transform:scale(1.1)}

View File

@ -2,6 +2,10 @@ html.image-viewer-opened,
body.image-viewer-opened {
overflow: hidden !important;
}
.image-viewer-container,
.image-viewer-container * {
transition: .2s ease-out;
}
.image-viewer-container {
background: rgba(0, 0, 0, 0.85);
width: 100%;
@ -10,12 +14,15 @@ body.image-viewer-opened {
top: 0;
left: 0;
z-index: 100002;
display: none;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
}
.image-viewer-container.opened {
display: flex;
opacity: 1;
pointer-events: initial;
}
.image-viewer {
width: 90%;
@ -37,6 +44,10 @@ body.image-viewer-opened {
justify-content: stretch;
align-items: center;
align-content: stretch;
transform: scale(.95);
}
.image-viewer-container.opened .image-viewer {
transform: scale(1);
}
.image-viewer .image {
grid-area: image;