effect-fade.js 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  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. export default function EffectFade(_ref) {
  5. let {
  6. swiper,
  7. extendParams,
  8. on
  9. } = _ref;
  10. extendParams({
  11. fadeEffect: {
  12. crossFade: false,
  13. transformEl: null
  14. }
  15. });
  16. const setTranslate = () => {
  17. const {
  18. slides
  19. } = swiper;
  20. const params = swiper.params.fadeEffect;
  21. for (let i = 0; i < slides.length; i += 1) {
  22. const $slideEl = swiper.slides.eq(i);
  23. const offset = $slideEl[0].swiperSlideOffset;
  24. let tx = -offset;
  25. if (!swiper.params.virtualTranslate) tx -= swiper.translate;
  26. let ty = 0;
  27. if (!swiper.isHorizontal()) {
  28. ty = tx;
  29. tx = 0;
  30. }
  31. const slideOpacity = swiper.params.fadeEffect.crossFade ? Math.max(1 - Math.abs($slideEl[0].progress), 0) : 1 + Math.min(Math.max($slideEl[0].progress, -1), 0);
  32. const $targetEl = effectTarget(params, $slideEl);
  33. $targetEl.css({
  34. opacity: slideOpacity
  35. }).transform(`translate3d(${tx}px, ${ty}px, 0px)`);
  36. }
  37. };
  38. const setTransition = duration => {
  39. const {
  40. transformEl
  41. } = swiper.params.fadeEffect;
  42. const $transitionElements = transformEl ? swiper.slides.find(transformEl) : swiper.slides;
  43. $transitionElements.transition(duration);
  44. effectVirtualTransitionEnd({
  45. swiper,
  46. duration,
  47. transformEl,
  48. allSlides: true
  49. });
  50. };
  51. effectInit({
  52. effect: 'fade',
  53. swiper,
  54. on,
  55. setTranslate,
  56. setTransition,
  57. overwriteParams: () => ({
  58. slidesPerView: 1,
  59. slidesPerGroup: 1,
  60. watchSlidesProgress: true,
  61. spaceBetween: 0,
  62. virtualTranslate: !swiper.params.cssMode
  63. })
  64. });
  65. }