Merge pull request #464 from ismail9k/add-fade-animation

ismail9k · web-flow · commit 0cd1b470370a · 2024-12-26T14:38:07.000+03:00
Add fade in-out animation effect to carousel
diff --git a/playground/App.vue b/playground/App.vue
@@ -8,7 +8,12 @@ import {
 } from '@/index'
 import { computed, onMounted, reactive, ref } from 'vue'
 
-import { DIR_MAP, SNAP_ALIGN_OPTIONS, BREAKPOINT_MODE_OPTIONS } from '@/shared/constants'
+import {
+  DIR_MAP,
+  SNAP_ALIGN_OPTIONS,
+  BREAKPOINT_MODE_OPTIONS,
+  SLIDE_EFFECTS,
+} from '@/shared/constants'
 
 const carouselWrapper = ref<HTMLDivElement | null>(null)
 const carousel = ref<VueCarousel | null>(null)
@@ -30,6 +35,7 @@ const defaultSlides = [
 const defaultConfig = {
   currentSlide: 0,
   snapAlign: 'center',
+  slideEffect: 'slide',
   itemsToScroll: 1,
   itemsToShow: 2,
   autoplay: null,
@@ -93,6 +99,12 @@ const formFields = [
         path: 'snapAlign',
         options: SNAP_ALIGN_OPTIONS,
       },
+      {
+        type: 'select',
+        label: 'Slide Effect',
+        path: 'slideEffect',
+        options: SLIDE_EFFECTS,
+      },
       {
         type: 'select',
         label: 'Direction',
@@ -141,6 +153,7 @@ const formFields = [
 ]
 
 const handleReset = () => {
+  return
   // Reset animation
   if (carouselWrapper.value) {
     carouselWrapper.value.classList.remove('pop-in')
diff --git a/src/components/Carousel/Carousel.css b/src/components/Carousel/Carousel.css
@@ -21,6 +21,7 @@
   position: relative;
   transition: transform ease-out;
   height: var(--vc-trk-height, auto);
+  transition-duration: var(--vc-trk-transition-duration);
 }
 
 .carousel__viewport {
@@ -61,3 +62,27 @@
     margin-inline-start: var(--vc-trk-cloned-offset);
   }
 }
+
+.carousel.is-effect-fade {
+  .carousel__track {
+    transition: none;
+    display: grid;
+    grid-template-columns: 100%;
+    grid-template-rows: 100%;
+  }
+
+  .carousel__slide {
+    opacity: 0;
+    width: 100% !important;
+    height: 100% !important;
+    transition: opacity ease-in-out;
+    transition-duration: var(--vc-trk-transition-duration);
+    grid-area: 1 / 1; /* Make all slides occupy the same grid cell */
+    pointer-events: none; /* Prevent inactive slides from being clickable */
+  }
+
+  .carousel__slide--active {
+    opacity: 1;
+    pointer-events: auto; /* Re-enable pointer events for active slide */
+  }
+}
diff --git a/src/components/Carousel/Carousel.ts b/src/components/Carousel/Carousel.ts
@@ -697,9 +697,11 @@ export const Carousel = defineComponent({
     })
 
     const trackStyle = computed(() => ({
-      transform: trackTransform.value,
-      'transition-duration': isSliding.value ? `${config.transition}ms` : undefined,
+      transform: config.slideEffect === 'slide' ? trackTransform.value : undefined,
       gap: config.gap > 0 ? `${config.gap}px` : undefined,
+      '--vc-trk-transition-duration': isSliding.value
+        ? `${config.transition}ms`
+        : undefined,
       '--vc-trk-height': trackHeight.value,
       '--vc-trk-cloned-offset': `${clonedSlidesOffset.value}px`,
     }))
@@ -755,6 +757,7 @@ export const Carousel = defineComponent({
           class: [
             'carousel',
             `is-${normalizedDir.value}`,
+            `is-effect-${config.slideEffect}`,
             {
               'is-vertical': isVertical.value,
               'is-sliding': isSliding.value,
diff --git a/src/components/Carousel/carouselProps.ts b/src/components/Carousel/carouselProps.ts
@@ -4,10 +4,17 @@ import {
   BREAKPOINT_MODE_OPTIONS,
   DEFAULT_CONFIG,
   DIR_OPTIONS,
+  SLIDE_EFFECTS,
   SNAP_ALIGN_OPTIONS,
 } from '@/shared'
 
-import type { BreakpointMode, Dir, SnapAlign, CarouselConfig } from '@/shared'
+import type {
+  BreakpointMode,
+  Dir,
+  SnapAlign,
+  CarouselConfig,
+  SlideEffect,
+} from '@/shared'
 
 export const carouselProps = {
   // enable/disable the carousel component
@@ -106,5 +113,12 @@ export const carouselProps = {
   ignoreAnimations: {
     default: false,
     type: [Array, Boolean, String] as PropType<CarouselConfig['ignoreAnimations']>,
-  }
+  },
+  slideEffect: {
+    type: String as PropType<SlideEffect>,
+    default: DEFAULT_CONFIG.slideEffect,
+    validator(value: SlideEffect) {
+      return SLIDE_EFFECTS.includes(value)
+    },
+  },
 }
diff --git a/src/shared/constants.ts b/src/shared/constants.ts
@@ -1,6 +1,13 @@
 import { CarouselConfig } from './types'
 
-export const SNAP_ALIGN_OPTIONS = ['center', 'start', 'end', 'center-even', 'center-odd'] as const
+export const SNAP_ALIGN_OPTIONS = [
+  'center',
+  'start',
+  'end',
+  'center-even',
+  'center-odd',
+] as const
+export const SLIDE_EFFECTS = ['slide', 'fade'] as const
 export const BREAKPOINT_MODE_OPTIONS = ['viewport', 'carousel'] as const
 export const DIR_OPTIONS = [
   'ltr',
@@ -53,4 +60,5 @@ export const DEFAULT_CONFIG: CarouselConfig = {
   breakpoints: undefined,
   i18n: I18N_DEFAULT_CONFIG,
   ignoreAnimations: false,
+  slideEffect: SLIDE_EFFECTS[0],
 }
diff --git a/src/shared/types.ts b/src/shared/types.ts
@@ -5,6 +5,7 @@ import {
   I18N_DEFAULT_CONFIG,
   NORMALIZED_DIR_OPTIONS,
   DIR_MAP,
+  SLIDE_EFFECTS,
 } from './constants'
 
 export type Breakpoints = {
@@ -13,6 +14,7 @@ export type Breakpoints = {
   >
 }
 
+export type SlideEffect = (typeof SLIDE_EFFECTS)[number]
 export type SnapAlign = (typeof SNAP_ALIGN_OPTIONS)[number]
 
 export type Dir = (typeof DIR_OPTIONS)[number]
@@ -44,6 +46,7 @@ export interface CarouselConfig {
   height: string | number
   i18n: { [key in I18nKeys]?: string }
   ignoreAnimations: boolean | string[] | string
+  slideEffect: SlideEffect
 }
 
 export type VueClass = string | Record<string, boolean> | VueClass[]
diff --git a/tests/integration/__snapshots__/carousel.spec.ts.snap b/tests/integration/__snapshots__/carousel.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`SSR Carousel > renders server side properly 1`] = `
 "<div id="app">
-  <section class="carousel is-ltr" dir="ltr" aria-label="Gallery" tabindex="0">
+  <section class="carousel is-ltr is-effect-slide" dir="ltr" aria-label="Gallery" tabindex="0">
     <div class="carousel__viewport">
       <ol class="carousel__track" style="transform: translateX(0px); --vc-trk-cloned-offset: 0px;">
         <li style="width: 50%;" class="carousel__slide carousel__slide--clone" aria-hidden="true">5 <input type="text" tabindex="-1"></li>
@@ -31,11 +31,11 @@ exports[`SSR Carousel > renders server side properly 1`] = `
 </div>"
 `;
 
-exports[`SSR Carousel > renders server side properly 2`] = `"<div id="app"><section class="carousel is-ltr" dir="ltr" aria-label="Gallery" tabindex="0"><div class="carousel__viewport"><ol class="carousel__track" style="transform:translateX(0px);--vc-trk-cloned-offset:0px;"><!--[--><li style="width:50%;" class="carousel__slide carousel__slide--visible carousel__slide--prev" id="v-0">1 <input type="text"></li><li style="width:50%;" class="carousel__slide carousel__slide--visible carousel__slide--active" id="v-1">2 <input type="text"></li><li style="width:50%;" class="carousel__slide carousel__slide--visible carousel__slide--next" id="v-2">3 <input type="text"></li><li style="width:50%;" class="carousel__slide" id="v-3">4 <input type="text"></li><li style="width:50%;" class="carousel__slide" id="v-4">5 <input type="text"></li><!--]--></ol></div><!--[--><!--[--><button type="button" aria-label="Navigate to previous slide" title="Navigate to previous slide" class="carousel__prev"><svg class="carousel__icon" viewBox="0 0 24 24" role="img" aria-label="Arrow pointing to the left"><title>Arrow pointing to the left</title><path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"></path></svg></button><button type="button" aria-label="Navigate to next slide" title="Navigate to next slide" class="carousel__next"><svg class="carousel__icon" viewBox="0 0 24 24" role="img" aria-label="Arrow pointing to the right"><title>Arrow pointing to the right</title><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"></path></svg></button><!--]--><ol class="carousel__pagination"><li class="carousel__pagination-item"><button type="button" class="carousel__pagination-button" aria-label="Navigate to slide 1" aria-pressed="false" aria-controls="v-0" title="Navigate to slide 1"></button></li><li class="carousel__pagination-item"><button type="button" class="carousel__pagination-button carousel__pagination-button--active" aria-label="Navigate to slide 2" aria-pressed="true" aria-controls="v-1" title="Navigate to slide 2"></button></li><li class="carousel__pagination-item"><button type="button" class="carousel__pagination-button" aria-label="Navigate to slide 3" aria-pressed="false" aria-controls="v-2" title="Navigate to slide 3"></button></li><li class="carousel__pagination-item"><button type="button" class="carousel__pagination-button" aria-label="Navigate to slide 4" aria-pressed="false" aria-controls="v-3" title="Navigate to slide 4"></button></li><li class="carousel__pagination-item"><button type="button" class="carousel__pagination-button" aria-label="Navigate to slide 5" aria-pressed="false" aria-controls="v-4" title="Navigate to slide 5"></button></li></ol><!--]--><div class="carousel__liveregion carousel__sr-only" aria-live="polite" aria-atomic="true">Item 2 of 5</div></section></div>"`;
+exports[`SSR Carousel > renders server side properly 2`] = `"<div id="app"><section class="carousel is-ltr is-effect-slide" dir="ltr" aria-label="Gallery" tabindex="0"><div class="carousel__viewport"><ol class="carousel__track" style="transform:translateX(0px);--vc-trk-cloned-offset:0px;"><!--[--><li style="width:50%;" class="carousel__slide carousel__slide--visible carousel__slide--prev" id="v-0">1 <input type="text"></li><li style="width:50%;" class="carousel__slide carousel__slide--visible carousel__slide--active" id="v-1">2 <input type="text"></li><li style="width:50%;" class="carousel__slide carousel__slide--visible carousel__slide--next" id="v-2">3 <input type="text"></li><li style="width:50%;" class="carousel__slide" id="v-3">4 <input type="text"></li><li style="width:50%;" class="carousel__slide" id="v-4">5 <input type="text"></li><!--]--></ol></div><!--[--><!--[--><button type="button" aria-label="Navigate to previous slide" title="Navigate to previous slide" class="carousel__prev"><svg class="carousel__icon" viewBox="0 0 24 24" role="img" aria-label="Arrow pointing to the left"><title>Arrow pointing to the left</title><path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"></path></svg></button><button type="button" aria-label="Navigate to next slide" title="Navigate to next slide" class="carousel__next"><svg class="carousel__icon" viewBox="0 0 24 24" role="img" aria-label="Arrow pointing to the right"><title>Arrow pointing to the right</title><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"></path></svg></button><!--]--><ol class="carousel__pagination"><li class="carousel__pagination-item"><button type="button" class="carousel__pagination-button" aria-label="Navigate to slide 1" aria-pressed="false" aria-controls="v-0" title="Navigate to slide 1"></button></li><li class="carousel__pagination-item"><button type="button" class="carousel__pagination-button carousel__pagination-button--active" aria-label="Navigate to slide 2" aria-pressed="true" aria-controls="v-1" title="Navigate to slide 2"></button></li><li class="carousel__pagination-item"><button type="button" class="carousel__pagination-button" aria-label="Navigate to slide 3" aria-pressed="false" aria-controls="v-2" title="Navigate to slide 3"></button></li><li class="carousel__pagination-item"><button type="button" class="carousel__pagination-button" aria-label="Navigate to slide 4" aria-pressed="false" aria-controls="v-3" title="Navigate to slide 4"></button></li><li class="carousel__pagination-item"><button type="button" class="carousel__pagination-button" aria-label="Navigate to slide 5" aria-pressed="false" aria-controls="v-4" title="Navigate to slide 5"></button></li></ol><!--]--><div class="carousel__liveregion carousel__sr-only" aria-live="polite" aria-atomic="true">Item 2 of 5</div></section></div>"`;
 
 exports[`SSR Carousel > renders slotted server side properly 1`] = `
 "<div id="app">
-  <section class="carousel is-ltr" dir="ltr" aria-label="Gallery" tabindex="0">
+  <section class="carousel is-ltr is-effect-slide" dir="ltr" aria-label="Gallery" tabindex="0">
     <div class="carousel__viewport">
       <ol class="carousel__track" style="transform: translateX(0px); --vc-trk-cloned-offset: 0px;">
         <li style="width: 100%;" class="carousel__slide carousel__slide--clone carousel__slide--prev" aria-hidden="true">5</li>
@@ -51,10 +51,10 @@ exports[`SSR Carousel > renders slotted server side properly 1`] = `
 </div>"
 `;
 
-exports[`SSR Carousel > renders slotted server side properly 2`] = `"<div id="app"><section class="carousel is-ltr" dir="ltr" aria-label="Gallery" tabindex="0"><div class="carousel__viewport"><ol class="carousel__track" style="transform:translateX(0px);--vc-trk-cloned-offset:0px;"><!--[--><!--[--><li style="width:100%;" class="carousel__slide carousel__slide--visible carousel__slide--active" id="v-0">1</li><li style="width:100%;" class="carousel__slide carousel__slide--next" id="v-1">2</li><li style="width:100%;" class="carousel__slide" id="v-2">3</li><li style="width:100%;" class="carousel__slide" id="v-3">4</li><li style="width:100%;" class="carousel__slide" id="v-4">5</li><!--]--><!--]--></ol></div><!--[--><!--]--><div class="carousel__liveregion carousel__sr-only" aria-live="polite" aria-atomic="true">Item 1 of 5</div></section></div>"`;
+exports[`SSR Carousel > renders slotted server side properly 2`] = `"<div id="app"><section class="carousel is-ltr is-effect-slide" dir="ltr" aria-label="Gallery" tabindex="0"><div class="carousel__viewport"><ol class="carousel__track" style="transform:translateX(0px);--vc-trk-cloned-offset:0px;"><!--[--><!--[--><li style="width:100%;" class="carousel__slide carousel__slide--visible carousel__slide--active" id="v-0">1</li><li style="width:100%;" class="carousel__slide carousel__slide--next" id="v-1">2</li><li style="width:100%;" class="carousel__slide" id="v-2">3</li><li style="width:100%;" class="carousel__slide" id="v-3">4</li><li style="width:100%;" class="carousel__slide" id="v-4">5</li><!--]--><!--]--></ol></div><!--[--><!--]--><div class="carousel__liveregion carousel__sr-only" aria-live="polite" aria-atomic="true">Item 1 of 5</div></section></div>"`;
 
 exports[`Wrap around Carousel.ts > renders wrapAround correctly 1`] = `
-"<section class="carousel is-ltr" dir="ltr" aria-label="Gallery" tabindex="0">
+"<section class="carousel is-ltr is-effect-slide" dir="ltr" aria-label="Gallery" tabindex="0">
   <div class="carousel__viewport">
     <ol class="carousel__track" style="transform: translateX(0px); --vc-trk-cloned-offset: 0px;">
       <li style="width: 33.333333333333336%;" class="carousel__slide" id="v-0">1 <input type="text"></li>

Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,7 @@ import {`
`5`	`5`	`I18N_DEFAULT_CONFIG,`
`6`	`6`	`NORMALIZED_DIR_OPTIONS,`
`7`	`7`	`DIR_MAP,`
	`8`	`+ SLIDE_EFFECTS,`
`8`	`9`	`} from './constants'`
`9`	`10`
`10`	`11`	`export type Breakpoints = {`
`@@ -13,6 +14,7 @@ export type Breakpoints = {`
`13`	`14`	`>`
`14`	`15`	`}`
`15`	`16`
	`17`	`+export type SlideEffect = (typeof SLIDE_EFFECTS)[number]`
`16`	`18`	`export type SnapAlign = (typeof SNAP_ALIGN_OPTIONS)[number]`
`17`	`19`
`18`	`20`	`export type Dir = (typeof DIR_OPTIONS)[number]`
`@@ -44,6 +46,7 @@ export interface CarouselConfig {`
`44`	`46`	`height: string \| number`
`45`	`47`	`i18n: { [key in I18nKeys]?: string }`
`46`	`48`	`ignoreAnimations: boolean \| string[] \| string`
	`49`	`+ slideEffect: SlideEffect`
`47`	`50`	`}`
`48`	`51`
`49`	`52`	`export type VueClass = string \| Record<string, boolean> \| VueClass[]`