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