Как мне заставить мою matchMedia работать внутри моего слушателя событий изменения размера? - PullRequest
Новая
       7

Как мне заставить мою matchMedia работать внутри моего слушателя событий изменения размера?

0 голосов
/ 16 февраля 2019

У меня есть TweenLite, устанавливающий мой startTrigger на x пикселей в зависимости от размера matchMedia.Я хочу, чтобы этот matchMedia запускался при изменении размера браузера, поэтому я добавил прослушиватель событий.Он не работает, так как мне нужно перезагрузить страницу, чтобы она запустила matchMedia.

Я попытался вставить код matchMedia в мой приемник событий изменения размера, который также обрабатывает верхнюю позицию моего элемента.

var triggerOffset2 = document.documentElement.clientHeight / 2 + 44;
var cardHeight2 = $('#card2').outerHeight(true) / 2 + 22;
var duration2 = 1000;
var requestId2 = null;  


window.addEventListener("resize", function() { 

var sceneStart2;
  if (window.matchMedia("(min-width: 1024px)").matches) {
    sceneStart2 = 5000
  } else {
    sceneStart2 = 7000
  }
  console.log(sceneStart2);

    triggerOffset2 =  document.documentElement.clientHeight / 2 +  44;

    TweenLite.set(".contain2", {
        top: triggerOffset2 - cardHeight2

    });

    TweenLite.set(".timeline-trigger", {
        top: triggerOffset2
    });
});

var sceneStart2;
  if (window.matchMedia("(min-width: 1024px)").matches) {
    sceneStart2 = 5000
  } else {
    sceneStart2 = 7000
  }
  console.log(sceneStart2);

TweenLite.set(".contain2", {
  top: triggerOffset2 - cardHeight2

});

TweenLite.set(".timeline-trigger", {
  top: triggerOffset2
});

TweenLite.set(".start-trigger", {
  top: sceneStart2
});

TweenLite.set(".end-trigger", {
  top: sceneStart2 + duration2
});


// SCROLL MAGIC!!!
var tl2 = new TimelineMax({ paused: true })
  .set(".card2", {  }, sceneStart2)
  .to(".card2", duration2, { rotationY: 180 }, sceneStart2)
  .set(".card2", {  })

// Only update on animation frames
window.addEventListener("scroll", function() {
  if (!requestId2) {
    requestId2 = requestAnimationFrame(update2);
  }
});

update2();

// Set timeline time to scrollTop
function update2() {
  tl2.time(window.pageYOffset + triggerOffset2);
  requestId2 = null;
}

MatchMedia должна запускаться при изменении размера браузера для изменения верхней позиции .contain2 и номера для sceneStart2

1 Ответ

0 голосов
/ 16 февраля 2019

Вместо привязки addEventListener к событию изменения размера window следует использовать собственный addListener метод matchMedia предложений.

С MDN :

Метод addListener () интерфейса MediaQueryList добавляет прослушиватель к MediaQueryListener, который будет запускать пользовательскую функцию обратного вызова в ответ на изменение состояния медиазапроса.

Я бы объявил sceneStart2 один раз, наверху вашего JavaScript.Его значение будет обновлено встроенным слушателем, и вы можете удалить всю другую логику matchMedia из вашего кода.

Вот урезанный пример, на который вы можете посмотреть.Немного поработав, вы сможете интегрировать это в свой код.Для демонстрации откройте предварительный просмотр «Полная страница» ниже. 

var sceneStart2;
var output = document.querySelector('.output > span');
var minWidthMatch = window.matchMedia("(min-width: 1024px)");

function getSceneStartValue(mediaQueryList) {
  sceneStart2 = mediaQueryList.matches ? 5000 : 7000;
  displayOutput();
}

function displayOutput() {
  output.innerHTML = sceneStart2;
}

minWidthMatch.addListener(getSceneStartValue);

window.onload = getSceneStartValue(minWidthMatch);
span { font-weight: bold; }
<p>Resize the browser to dynamically change value.</p>
<div class="output">Value of <code>sceneStart2</code> = <span></span></div>

jsFiddle

...