47 lines
1.0 KiB
SCSS
47 lines
1.0 KiB
SCSS
// This animation will be shown when user change the pages in the product collection block
|
|
.wc-block-product-collection__pagination-animation {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100vw;
|
|
max-width: 100vw;
|
|
height: 4px;
|
|
background-color: var(--wp--preset--color--primary, #000);
|
|
opacity: 0; // Hide the animation by default.
|
|
transform-origin: 0% 0%; // Start the animation from the left.
|
|
pointer-events: none; // Allows click events to pass through to elements underneath.
|
|
|
|
&.start-animation {
|
|
animation: wc-block-product-collection__pagination-start-animation 30s cubic-bezier(0.03, 0.5, 0, 1) forwards;
|
|
}
|
|
|
|
&.finish-animation {
|
|
animation: wc-block-product-collection__pagination-finish-animation 300ms ease-in;
|
|
}
|
|
}
|
|
|
|
@keyframes wc-block-product-collection__pagination-start-animation {
|
|
0% {
|
|
transform: scaleX(0);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: scaleX(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes wc-block-product-collection__pagination-finish-animation {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|