인프런 커뮤니티 질문&답변

안녕하세요 :)

먼저 해당 질문은 수업과 연관이 없는 부분이고 굳이 왜 그렇게 구현을 해야하는지 의문이 드네요^^;

이 문제를 해결하려면 먼저 animation 속성의 특징을 살펴보고 직접 테스트를 진행해 봐야 할 것 같습니다.

(섹션 12는 animation 을 활용해 인터렉션을 구현했기 때문이죠?)

** 굳이 억지로 구현해야 한다면 아래와 같이 구현할 수 있을것 같지만 이 코드는 브라우저마다 호환성이 떨어질 수 있습니다. 이유는 브라우저마다 animation을 처리하는 부분이 다를 수 있기 때문입니다.

css수정 (코드 추가)

.fix_box .txt.active {

opacity: 1 !important;

}

html수정 (첫번째 엘리먼트에 클래스 추가)

<p class="txt active">안녕하세요</p>

스크립트 추가 (스크롤 이벤트 발생하면 active 클래스를 삭제해 animation 코드로 진행 하도록 만듬)

스크립트 추가 (스크롤 이벤트 발생하면 active 클래스를 삭제해 animation 코드로 진행 하도록 만듬)

arr.classList.remove('active');

** 다시한번 말하지만 위 코드는 여러 브라우저에서 다르게 동작할 수 있습니다(크롬에서 테스트 진행). 억지로 구현해야 한다면 css animation에 대해 살펴보고 조건문 등을 활용해 직접 테스트를 진행해 보길 추천드립니다. :)

** 만약 해당 문제를 꼭 해결해야 한다면 fake엘리먼트를 사용해 보는 것도 방법이 될 수 있겠습니다. :)

그럼 또 다른 궁금증이 생기면 문의주세요 :D