пытается requestAnimationFrame, но он не отвечает на прокрутку - PullRequest
Новая
       14

пытается requestAnimationFrame, но он не отвечает на прокрутку

0 голосов
/ 30 октября 2019

Я пытаюсь использовать requestAnimationFrame для прокрутки анимации в моем приложении Vue, но, похоже, не работает то, что я пишу, я хочу показать Изображение , когда эта прокрутка на этом элементе Изображение

в моем компоненте Vue что-то вроде этого 

    data(){
      return {
         id: undefined,
       }
    },
    methods: {
      fancyFunction() {
          const elementToShow = document.querySelectorAll(".scrollPic");
          elementToShow.forEach(element => {
              if(this.isELementInViewPort(element)) {
                  console.log("correct")
                  element.classList.add('is-visible')
              }
          })
      },
      isELementInViewPort(el) {
        const rect = el.getBoundingClientRect();
        console.log(rect)
        return (
            (rect.top <= 0 && rect.bottom >= 0) ||
            (rect.bottom >= ( window.innerHeight || document.documentElement.clientHeight) && rect.top <= (window.innerHeight || document.documentElement.clientHeight)) ||
            (rect.top >= 0 && rect.bottom <= ( window.innerHeight || document.documentElement.clientHeight))
        )
      }
    },
    }
    created() {
        this.id = window.requestAnimationFrame(
            this.fancyFunction
        )
    },
    destroyed() {
          window.cancelAnimationFrame(this.id);
          this.id = undefined;
    }

почему я использую id? потому что я хочу, чтобы эта функция requestAnimationFrame работала только с этим компонентом , и после того, как этот компонент ушел, я уничтожаю эту функцию, чтобы она не выполнялась все время, когдаЯ console.log() он не смотрит, что я прокручиваю, он просто прочитал один раз на прокрутке, что не так в моем коде выше ??

...