beenull/photoprism
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Frontend: Use CSS transition for photo viewer #381

Browse source 
After testing, this seems more compatible than animations. Might revisit this later.

Signed-off-by: Michael Mayer <michael@liquidbytes.net>
This commit is contained in:
Michael Mayer 2020-07-08 08:16:35 +02:00
parent 2d72dc7c47
commit def9d3a80f
2 changed files with 3 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
frontend/src/component/photo/viewer.vue
View file

@ -116,9 +116,6 @@
if (this.interval) { if (this.interval) {
clearInterval(this.interval); clearInterval(this.interval);
this.interval = false; this.interval = false;
const psp = this.$viewer.gallery;
psp.framework.removeClass(psp.container, "slide_show");
} }
}, },
onSlideshow() { onSlideshow() {
@ -132,15 +129,13 @@
psp.next(); psp.next();
psp.framework.addClass(psp.container, "slide_show");
self.interval = setInterval(() => { self.interval = setInterval(() => {
if (psp && typeof psp.next === "function") { if (psp && typeof psp.next === "function") {
psp.next(); psp.next();
} else { } else {
this.onPause(); this.onPause();
} }
}, 4000); }, 5000);
}, },
onDownload() { onDownload() {
if (!this.item || !this.item.download_url) { if (!this.item || !this.item.download_url) {

17
frontend/src/css/viewer.css
View file

@ -55,19 +55,6 @@
box-shadow: none; box-shadow: none;
} }
@keyframes fadeInOut { #p-photo-viewer .pswp__container {
0% { transition: transform 1s ease-in-out;
opacity:0;
}
30% {
opacity:1;
}
} }
.slide_show {
animation-name: fadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 2s;
animation-direction: alternate;
}