배민찬

슬라이드효과 리팩토링

DOM 구조 변경

list item을 담고있는 list_item_wrap엘리먼트를 생성한다. 기존에는 list_item을 전부 이동시켰다면 지금은 wrapper만 이동시킨다

<div class='main_section_list'>
    <ul class='main_section_list_item_wrap'>
        <li></li>
        <li></li>
        ...
    </ul>
</div>

렌더링시에 깜빡이던 현상이 사라졌다. 이전에는 list item 엘리먼트 전부를 이동시켰다면, 지금은 엘리먼트 하나만 이동시키기 때문에 렌더링이 빨리진 것 같다.

상단이동 버튼

fade in/out 효과

transition 사용의 문제

버튼이 사라질 때 fade out을 적용시키고 전부 사라진다면 visibility: hidden을 적용시키고 싶었다. 기존 방법처럼 transition속성과 클래스이름을 추가삭제하는 classList 사용해 다음과 같이 구현할 예정이었음

.button {
    ...
    opacity: 1;
    transition: opacity 1s;
}
.button.deactive {
    opacity: 0;
    visibility: hidden;
}

하지만 deactive될 때 hidden이 적용되어 엘리먼트가 바로 사라지면서 fade out 효과가 나타나지 않는 문제 발생

animation속성 사용

animation을 사용해 from - to 설정을 하면 fade out 효과가 끝남과 동시에 visibility를 hidden할 수 있음

대신 animation 속성은 실제 엘리먼트에 영향을 주지 않으므로 fadeout이 지속되려면 animation-fill-mode속성을 추가적으로 사용해야함

@keyframes fade_out {
  0% {opacity: 1; visibility: visible;}
  100% {opacity: 0; visibility: hidden;}
}

.button.deactive {
  animation: fade_out .5s forwards;
  /*
  animation: fade_out .5s;
  animation-fill-mode: forwards;
  */
}

forwards : 엘리먼트가 마지막 keyframe에 설정된 스타일을 계속 유지함

window.scroll-* 속성

스크롤을 이용하기 위한 편리한 속성들

window.scrollTo(x,y) : 해당 좌표로 이동

window.scrollBy(x,y) : 해당 크기만큼 이동

window.pageYOffset: 현재 스크롤된 페이지의 y 좌표

window.innerHeight: 뷰포트의 height