인프런 커뮤니티 질문&답변
action이 true일때 실행되는데 false에서 초기화가 안되요ㅠ
해결된 질문
작성
·
301
0
(()=>{
  const actions = {
    birdFlies(key){
      if(key){
        document.querySelector('[data-index="2"] .bird').style.transform = `translateX(${window.innerWidth}px)`;
      } else{
        document.querySelector('[data-index="2"] .bird').style.transform = `translateX(-100%)`;
      }
    },
    birdFlies2(key){
      if(key){
        document.querySelector('[data-index="5"] .bird').style.transform = `translate(${window.innerWidth}px, ${-window.innerHeight * 0.7}px`;
      } else{
        document.querySelector('[data-index="5"] .bird').style.transform = `translateX(-100%)`;
      }
    }
  };
  const stepElems = document.querySelectorAll('.step');
  const graphicElems = document.querySelectorAll('.graphic-item');
  let currentItem = graphicElems[0]; 
  let ioIndex;
  const io = new IntersectionObserver((entries, observer) => {
    ioIndex = entries[0].target.dataset.index * 1;
  });
  for(let i = 0; i < stepElems.length; i++){
    io.observe(stepElems[i]);
    stepElems[i].dataset.index = i; 
    graphicElems[i].dataset.index = i;
  }
  function activate(action){//활성화
    currentItem.classList.add('visible');
    if(action){
      actions[action](true);
    }
  }
  function inactivate(action){//비활성화
    currentItem.classList.remove('visible');
    if (action) {
      actions[action](false);
  }
  }
  window.addEventListener('scroll', () => {
    let step;
    let boundingRect;
    for(let i = ioIndex - 1; i < ioIndex + 2; i++){
      step = stepElems[i]; 
      if(!step) continue;
      boundingRect = step.getBoundingClientRect();
      if(boundingRect.top > window.innerHeight * 0.1 && 
        boundingRect.top < window.innerHeight * 0.8){
          inactivate();          
          currentItem = graphicElems[step.dataset.index]; 
          activate(currentItem.dataset.action);
      }
    }
  });
  window.addEventListener('load', () => {
    setTimeout(() => scrollTo(0, 0), 100);
  });
  activate();
})();
답변 2
1
inactivate(); // 인수가 빠져있습니다.
 inactivate(currentItem.dataset.action); //이런형식으로 인수를 넣어주시면 됩니다.
0




