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