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

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

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