• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

스크롤애니메이션이 최초로 한번만 동작해요 ㅜ

22.04.29 11:09 작성 조회수 198

0

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
 
 
0번째 scene에서 최초로 스크롤을 했을때는 opacity애니메이션이 잘 동작해요!
다만
0번째 scene을 한번이라도 벗어나면 애니메이션이 없어져버리고 opacity가 변하질않아요 ..
또는 2번째 scene에서 새로고침해서 스크롤을 올렸을 경우에도 messageA_opacity_in값이 출력이안돼요
 
콘솔로 this.messageA_opacity_in 체크해봤을 때 다른scene넘어가고나면 값을 출력하지않고있긴하더라고요.
딱히 에러가 발생하고있지도 않습니다.
스크롤함수인데 동작을 따로 안하는 이유가 있을까요?
링크 첨부드립니다
https://codesandbox.io/s/fervent-phoebe-pdkdfq?file=/src/App.vue
 
 

답변 1

답변을 작성해보세요.

0

스크롤 발생 시, playAnimation 내부에서 this.currentScene 값을 체크해 보시겠어요? 아마도 그 부분에서 오류가 있는 것 같습니다.

그리고 다른 이야기지만, 이런 인터랙티브 웹 구현부를 리액트나 뷰로 꼭 할 필요는 없을 것 같아요~
기능상 데이터 바인딩이 필요한 부분은 뷰로 작업을 하되, 이런 랜딩 페이지 역할을 하는 템플릿은 굳이 뷰로 안하셔도 괜찮을 것 같습니다. 어차피 계산을 통해 직접 돔을 제어하는 방식이라, 그런 부분에까지 뷰나 리액트를 굳이 사용할 이유가 없다고 생각되어서요^^