ScrollReveal js reset:false在移动设备上不起作用

时间:2020-10-27 08:21:59

标签: drupal-8 scrollreveal.js

我正在drupal网站中使用ScrollRevealjs库,由于某种原因,每次我仅在移动设备上滚动时,都会显示动画。目标是仅显示一次。 reset: false选项在桌面上可以正常使用。

这是我的代码:

/**
 * @file
 * Provides scrollreveal settings for paragraph types.
 */

(function($, Drupal) {
  /**
   * Attaches scrollreveal effects for certain classes.
   */
  Drupal.behaviors.cpl_base_scrollreveal = {
    attach(context) {
      const $scrollReveal = $('.cpl-reveal', context);

      $scrollReveal.once('scroll-reveal-paragraph').each(function() {
        const $this = $(this);
        const paragraphClass = `.paragraph--id--${$this.data(
          'paragraph-entity-id'
        )}`;
        const hasSlideshow = $this.hasClass('cpl-slideshow');

        window.sr = new ScrollReveal();

        $(window).resize(function() {
          checkSize();
        });

        checkSize();

        function checkSize() {
          if (hasSlideshow) {
            setTimeout(function() {
              if ($this.find('.slick-slider').length) {
                sr.destroy();
              } else {
                scrollRevealInit();
              }
            }, 300);
          } else {
            if (!sr) {
              window.sr = new ScrollReveal();
            }
            scrollRevealInit();
          }
        }

        function scrollRevealInit() {
          sr.reveal(
            `${paragraphClass} .cpl-reveal-l, ${paragraphClass}.cpl-reveal-l`,
            {
              origin: 'left',
              distance: '150%',
              duration: '1200',
              reset: false,
            }
          );
          sr.reveal(
            `${paragraphClass} .cpl-reveal-r, ${paragraphClass}.cpl-reveal-r`,
            {
              origin: 'right',
              distance: '150%',
              duration: '1200',
              reset: false,
            }
          );
          sr.reveal(
            `${paragraphClass} .cpl-reveal-t, ${paragraphClass}.cpl-reveal-t`,
            { origin: 'top', distance: '150%', duration: '1200', reset: false }
          );
          sr.reveal(
            `${paragraphClass} .cpl-reveal-b, ${paragraphClass}.cpl-reveal-b`,
            {
              origin: 'bottom',
              distance: '150%',
              duration: '1200',
              reset: false,
            }
          );
        }
      });
    },
  };
})(jQuery, Drupal);

谢谢!

0 个答案:

没有答案