effect-fade.js 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  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({
  5. swiper,
  6. extendParams,
  7. on
  8. }) {
  9. extendParams({
  10. fadeEffect: {
  11. crossFade: false,
  12. transformEl: null
  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) :
  31. 1 + Math.min(Math.max($slideEl.progress, -1), 0);
  32. const $targetEl = effectTarget(params, $slideEl);
  33. $targetEl.css({
  34. opacity: slideOpacity
  35. })
  36. $targetEl.transform(`translate3d(${tx}px, ${ty}px, 0px)`);
  37. if (swiper.params.willChange) {
  38. $targetEl.willChange("opacity");
  39. }
  40. slides[i].addClass('swiper-slide-fade')
  41. }
  42. };
  43. const setTransition = duration => {
  44. const {
  45. transformEl
  46. } = swiper.params.fadeEffect;
  47. const $transitionElements = transformEl ? swiper.slides.find(transformEl) : swiper.slides;
  48. for (let i = 0; i < $transitionElements.length; i += 1) {
  49. $transitionElements[i].transition(duration);
  50. }
  51. effectVirtualTransitionEnd({
  52. swiper,
  53. duration,
  54. transformEl,
  55. allSlides: true
  56. });
  57. };
  58. effectInit({
  59. effect: 'fade',
  60. swiper,
  61. on,
  62. setTranslate,
  63. setTransition,
  64. overwriteParams: () => ({
  65. slidesPerView: 1,
  66. slidesPerGroup: 1,
  67. watchSlidesProgress: true,
  68. spaceBetween: 0,
  69. virtualTranslate: !swiper.params.cssMode
  70. })
  71. });
  72. }