effect-fade.js 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. import effectInit from '../../shared/effect-init.js';
  2. import effectTarget from '../../shared/effect-target.js';
  3. import effectVirtualTransitionEnd from '../../shared/effect-virtual-transition-end.js';
  4. import { getSlideTransformEl } from '../../shared/utils.js';
  5. export default function EffectFade({
  6. swiper,
  7. extendParams,
  8. on
  9. }) {
  10. extendParams({
  11. fadeEffect: {
  12. crossFade: false
  13. }
  14. });
  15. const setTranslate = () => {
  16. const {
  17. slides
  18. } = swiper;
  19. const params = swiper.params.fadeEffect;
  20. for (let i = 0; i < slides.length; i += 1) {
  21. const slideEl = swiper.slides[i];
  22. const offset = slideEl.swiperSlideOffset;
  23. let tx = -offset;
  24. if (!swiper.params.virtualTranslate) tx -= swiper.translate;
  25. let ty = 0;
  26. if (!swiper.isHorizontal()) {
  27. ty = tx;
  28. tx = 0;
  29. }
  30. const slideOpacity = swiper.params.fadeEffect.crossFade ? Math.max(1 - Math.abs(slideEl.progress), 0) : 1 + Math.min(Math.max(slideEl.progress, -1), 0);
  31. const targetEl = effectTarget(params, slideEl);
  32. targetEl.style.opacity = slideOpacity;
  33. targetEl.style.transform = `translate3d(${tx}px, ${ty}px, 0px)`;
  34. }
  35. };
  36. const setTransition = duration => {
  37. const transformElements = swiper.slides.map(slideEl => getSlideTransformEl(slideEl));
  38. transformElements.forEach(el => {
  39. el.style.transitionDuration = `${duration}ms`;
  40. });
  41. effectVirtualTransitionEnd({
  42. swiper,
  43. duration,
  44. transformElements,
  45. allSlides: true
  46. });
  47. };
  48. effectInit({
  49. effect: 'fade',
  50. swiper,
  51. on,
  52. setTranslate,
  53. setTransition,
  54. overwriteParams: () => ({
  55. slidesPerView: 1,
  56. slidesPerGroup: 1,
  57. watchSlidesProgress: true,
  58. spaceBetween: 0,
  59. virtualTranslate: !swiper.params.cssMode
  60. })
  61. });
  62. }