KevinMidboe/seasoned
1
0
Fork 0
Code Issues 12 Pull Requests 1 Packages Projects Releases 1 Wiki Activity

Fade poster in with a before element with background -> transparent

Browse Source 
Fixes issue where mobile had some image flickering
This commit is contained in:
Kevin
2022-03-06 23:26:15 +01:00
parent 19366f29a9
commit d658d90d18
1 changed files with 28 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/MoviesListItem.vue
View File

@@ -1,10 +1,8 @@
<template> <template>
<li class="movie-item"> <li class="movie-item" ref="list-item">
<figure class="movie-item__poster"> <figure class="movie-item__poster" ref="poster" @click="openMoviePopup">
<img <img
class="movie-item__img" class="movie-item__img"
ref="poster-image"
@click="openMoviePopup"
:alt="posterAltText" :alt="posterAltText"
:data-src="poster" :data-src="poster"
src="/assets/placeholder.png" src="/assets/placeholder.png"
@@ -81,21 +79,22 @@ export default {
} }
}, },
mounted() { mounted() {
const poster = this.$refs["poster-image"]; const poster = this.$refs["poster"];
if (poster == null) return; const image = poster.getElementsByTagName("img")[0];
if (image == null) return;
const imageObserver = new IntersectionObserver((entries, imgObserver) => { const imageObserver = new IntersectionObserver((entries, imgObserver) => {
entries.forEach(entry => { entries.forEach(entry => {
if (entry.isIntersecting && this.observed == false) { if (entry.isIntersecting && this.observed == false) {
const lazyImage = entry.target; const lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src; lazyImage.src = lazyImage.dataset.src;
lazyImage.className = lazyImage.className + " is-loaded"; poster.className = poster.className + " is-loaded";
this.observed = true; this.observed = true;
} }
}); });
}); });
imageObserver.observe(poster); imageObserver.observe(image);
}, },
methods: { methods: {
...mapActions("popup", ["open"]), ...mapActions("popup", ["open"]),
@@ -117,7 +116,7 @@ export default {
.movie-item { .movie-item {
padding: 15px; padding: 15px;
width: 100%; width: 100%;
background-color: $background-color; background-color: var(--background-color);
&:hover &__info > p { &:hover &__info > p {
color: $text-color; color: $text-color;
@@ -127,22 +126,30 @@ export default {
text-decoration: none; text-decoration: none;
color: $text-color-70; color: $text-color-70;
font-weight: 300; font-weight: 300;
position: relative;
> img {
width: 100%;
opacity: 0;
transform: scale(0.97) translateZ(0); transform: scale(0.97) translateZ(0);
transition: opacity 1s ease, transform 0.5s ease;
&.is-loaded { &::before {
opacity: 1; content: "";
transform: scale(1); position: absolute;
z-index: 1;
width: 100%;
height: 100%;
background-color: var(--background-color);
transition: 1s background-color ease;
} }
&:hover { &:hover {
transform: scale(1.03); transform: scale(1.03);
box-shadow: 0 0 10px rgba($dark, 0.1); box-shadow: 0 0 10px rgba($dark, 0.1);
} }
&.is-loaded::before {
background-color: transparent;
}
img {
width: 100%;
} }
} }