feat(flip-effect): support cssMode

nolimits4web · Aug 9, 2021 · 82859a1 · 82859a1
1 parent e13d268
commit 82859a1
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 16 deletions.
diff --git a/src/modules/effect-flip/effect-flip.js b/src/modules/effect-flip/effect-flip.js
@@ -5,10 +5,23 @@ export default function Flip({ swiper, extendParams, on }) {
     flipEffect: {
       slideShadows: true,
       limitRotation: true,
+      transformEl: null,
     },
   });
+
+  const createShadow = (params, $slideEl, side) => {
+    const $shadowEl = $(`<div class="swiper-slide-shadow-${side}"></div>`);
+    if (params.transformEl) {
+      $slideEl.find(params.transformEl).append($shadowEl);
+    } else {
+      $slideEl.append($shadowEl);
+    }
+    return $shadowEl;
+  };
+
   const setTranslate = () => {
     const { slides, rtlTranslate: rtl } = swiper;
+    const params = swiper.params.flipEffect;
     for (let i = 0; i < slides.length; i += 1) {
       const $slideEl = slides.eq(i);
       let progress = $slideEl[0].progress;
@@ -19,7 +32,7 @@ export default function Flip({ swiper, extendParams, on }) {
       const rotate = -180 * progress;
       let rotateY = rotate;
       let rotateX = 0;
-      let tx = -offset;
+      let tx = swiper.params.cssMode ? -offset - swiper.translate : -offset;
       let ty = 0;
       if (!swiper.isHorizontal()) {
         ty = tx;
@@ -32,7 +45,7 @@ export default function Flip({ swiper, extendParams, on }) {
 
       $slideEl[0].style.zIndex = -Math.abs(Math.round(progress)) + slides.length;
 
-      if (swiper.params.flipEffect.slideShadows) {
+      if (params.slideShadows) {
         // Set shadows
         let shadowBefore = swiper.isHorizontal()
           ? $slideEl.find('.swiper-slide-shadow-left')
@@ -41,38 +54,43 @@ export default function Flip({ swiper, extendParams, on }) {
           ? $slideEl.find('.swiper-slide-shadow-right')
           : $slideEl.find('.swiper-slide-shadow-bottom');
         if (shadowBefore.length === 0) {
-          shadowBefore = $(
-            `<div class="swiper-slide-shadow-${swiper.isHorizontal() ? 'left' : 'top'}"></div>`,
-          );
-          $slideEl.append(shadowBefore);
+          shadowBefore = createShadow(params, $slideEl, swiper.isHorizontal() ? 'left' : 'top');
         }
         if (shadowAfter.length === 0) {
-          shadowAfter = $(
-            `<div class="swiper-slide-shadow-${swiper.isHorizontal() ? 'right' : 'bottom'}"></div>`,
-          );
-          $slideEl.append(shadowAfter);
+          shadowAfter = createShadow(params, $slideEl, swiper.isHorizontal() ? 'right' : 'bottom');
         }
         if (shadowBefore.length) shadowBefore[0].style.opacity = Math.max(-progress, 0);
         if (shadowAfter.length) shadowAfter[0].style.opacity = Math.max(progress, 0);
       }
-      $slideEl.transform(
-        `translate3d(${tx}px, ${ty}px, 0px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`,
-      );
+      const transform = `translate3d(${tx}px, ${ty}px, 0px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+      if (params.transformEl) {
+        $slideEl
+          .find(params.transformEl)
+          .css({ 'backface-visibility': 'hidden', '-webkit-backface-visibility': 'hidden' })
+          .transform(transform);
+      } else {
+        $slideEl.transform(transform);
+      }
     }
   };
 
   const setTransition = (duration) => {
     const { slides, activeIndex, $wrapperEl } = swiper;
-    slides
+    const { transformEl } = swiper.params.flipEffect;
+    const $transitionElements = transformEl ? swiper.slides.find(transformEl) : swiper.slides;
+    $transitionElements
       .transition(duration)
       .find(
         '.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left',
       )
       .transition(duration);
     if (swiper.params.virtualTranslate && duration !== 0) {
       let eventTriggered = false;
+      const $transitionEndTarget = transformEl
+        ? slides.eq(activeIndex).find(transformEl)
+        : slides.eq(activeIndex);
       // eslint-disable-next-line
-      slides.eq(activeIndex).transitionEnd(function onTransitionEnd() {
+      $transitionEndTarget.transitionEnd(function onTransitionEnd() {
         if (eventTriggered) return;
         if (!swiper || swiper.destroyed) return;
         eventTriggered = true;
@@ -94,7 +112,7 @@ export default function Flip({ swiper, extendParams, on }) {
       slidesPerGroup: 1,
       watchSlidesProgress: true,
       spaceBetween: 0,
-      virtualTranslate: true,
+      virtualTranslate: !swiper.params.cssMode,
     };
     Object.assign(swiper.params, overwriteParams);
     Object.assign(swiper.originalParams, overwriteParams);

diff --git a/src/types/modules/effect-flip.d.ts b/src/types/modules/effect-flip.d.ts
@@ -1,3 +1,5 @@
+import { CSSSelector } from '../shared';
+
 export interface FlipEffectMethods {}
 
 export interface FlipEffectEvents {}
@@ -15,4 +17,10 @@ export interface FlipEffectOptions {
    * @default true
    */
   limitRotation?: boolean;
+  /**
+   * CSS selector of the element inside of the slide to transform instead of the slide itself. Useful to use with cssMode
+   *
+   * @default null
+   */
+  transformEl?: CSSSelector;
 }