2021.04.29

김승우·2021년 4월 29일
0

TIL

목록 보기
54/68

* 사이드 프로젝트

1. 🎉 TIL

1. CSS 트랜지션, width 0%에서 100% 오른쪽에서 왼쪽 방향으로 변화시키기

position: absolute; right: 0;을 통해서 오른쪽에 정렬시키면 된다.

  • 적용한 소스
.element {
    width: 0px;
}

.lengthen {
    animation: lengthen 0.5s ease 0.1s normal forwards;
}

@keyframes lengthen {
    from {
        width: 0px;
    }
    to {
        width: 200px;
    }
}

lengthen 클래스를 가진 엘리먼트는 길이가 0px에서 200px까지 증가한다.

  • 참고
  1. 트랜지션이 안먹히는 이유
  2. 오른쪽에서 시작해서 왼쪽으로 길어지는 트랜지션 적용하기
  3. CSS 애니메이션 트랜지션

2. Vue 트랜지션 적용하기

  • 적용한 소스
<transition name="lengthen">
    <search-form v-if="isSearchForm" />
</transition>
/* Vue 트랜지션 클래스 */
.lengthen-enter-active,
.lengthen-leave-active {
    transition: all 0.3s;
}

.lengthen-enter,
.lengthen-leave-to {
    width: 0;
}

.lengthen-enter-to,
.lengthen-leave {
    width: 200px;
}

v-if에 토글되는 엘리먼트를 트랜지션 컴포넌트 안에 작성한다. name 프로퍼티를 통해서 적용할 트랜지션 속성을 적어준다!
Vue 트랜지션 클래스 참고

  1. Enter : 최초에 엘리먼트가 삽입될때 .lengthen-enter 클래스에 의해서 width가 0이되고, enter 상태가 활성 상태이므로 이때 .lengthen-enter-active 클래스가 활성화되어 있어 트랜지션 속성이 적용된다.
    enter 상태의 끝에서 실행되어 마지막 상태인 200px로 엘리먼트 width를 변화시킨다.
  2. Leave : 엘리먼트가 제거될 때 .lengthen-leave 클래스에 의해서 초기상태 200px이 되고, leave 상태가 활성 상태이므로 이때 .lengthen-leave-active 클래스가 활성화되어 있어 트랜지션 속성이 적용된다.
    leave 상태의 끝에서 실행되어 마지막 상태인 0px로 엘리먼트 width를 변화시킨다.

3. Vue Router 뒤로가기


🎉 DONE

  1. 검색 창 트랜지션 적용 ✔
  2. 검색 창 바깥 클릭 이벤트 적용 ✔
  3. 검색 창 검색어 지울 시 발생하는 이벤트 적용 ✔
profile
사람들에게 좋은 경험을 선사하고 싶은 주니어 프론트엔드 개발자

0개의 댓글