flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Carousel: Fix transitions due to opacity and box-shadow
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Félix Péault
2020-04-09 20:27:45 +02:00
parent be0f4c8b59
commit d6671f0e94
1 changed files with 13 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/style/organisms/_carousel.scss
View File

@@ -63,33 +63,29 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
box-shadow: 0 pxVW(15) pxVW(60) rgba(#000, 0.3);
transform: scale($scale) translateZ(0); transform: scale($scale) translateZ(0);
transition: transform $duration $ease-quart, opacity ($duration / 2) $ease-quart; transition: transform $duration $ease-quart, opacity ($duration / 2) $ease-quart;
pointer-events: none; pointer-events: none;
@extend %willchange; @extend %willchange;
// Active photo // Visible photos
&.is-active { &.is-active, &.is-prev, &.is-next {
opacity: 1; opacity: 1;
z-index: 10;
transform: scale(1) translateZ(0);
pointer-events: auto; pointer-events: auto;
img { picture {
opacity: 1; opacity: 1;
} }
} }
// Active photo
&.is-active {
z-index: 10;
transform: scale(1) translateZ(0);
}
// Previous & next photo // Previous & next photo
&.is-prev, &.is-next { &.is-prev, &.is-next {
opacity: 1;
pointer-events: auto;
img {
opacity: 1;
}
picture:before { picture:before {
@include breakpoint (sm) { @include breakpoint (sm) {
opacity: 0.4; opacity: 0.4;
@@ -132,11 +128,15 @@
// Picture // Picture
&__picture { &__picture {
opacity: 0;
position: relative; position: relative;
display: block; display: block;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
height: 100%; height: 100%;
box-shadow: 0 pxVW(15) pxVW(60) rgba(#000, 0.3);
transition: opacity 1s $ease-quart;
will-change: opacity;
@extend %willchange; @extend %willchange;
@include breakpoint (sm) { @include breakpoint (sm) {
@@ -158,7 +158,6 @@
} }
img { img {
opacity: 0;
position: relative; position: relative;
z-index: 1; z-index: 1;
display: block; display: block;