반응형

- CSS 애니메이션 ex)transition

1.일반 CSS사용하는 방식
class명을 줘서 시작과 끝을 정하는 방식이다. 변수를 클래스에 담을 때 :class와같이 사용하여 설정한다.
가능한 방법이지만 Transition을 사용하면 더욱 편하다.
<template>
<!-- true가 될때 .end무착하는거 즉 modal이 불린 자료형 이니까 -->
<div class="start" :class="{ end: modal }"><ModalPopup @closeModal="modal=false"
v-bind:oneroom="oneroom"
:roomNumber="roomNumber" :modal="modal"></ModalPopup></div>
</template>
......
<style>
.start{
opacity: 0;
transition:all 1s;
}
.end{
opacity: 1;
}
......
2.Vue.js제공하는 Transition사용하기
transiton을 사용하고싶은 컴포넌트를 <Transition>으로 감싸주고 name으로 이름을 지어준다.
그리고 style부분에서 컴포넌트 시작시, 종료시 2가지 경우가 있다.
1)시작시 이름-enter-from, 이름-enter-active, 이름-enter-to 로 3가지 경우로 나눠주고
2)종료시 이름-leave-from, 이름-leave-active, 이름-leave-to 로 나눠서 설정해준다.
<template>
<div>
<Transition name="fade">
<ModalPopup @closeModal="modal=false"
v-bind:oneroom="oneroom"
:roomNumber="roomNumber" :modal="modal"></ModalPopup>
</Transition>
..........
<style>
.fade-enter-from{
/* opacity: 0; */
transform: translateY(-1000px);
}
/* 시작시 스타일 */
.fade-enter-active{
transition: all 1s;
}
.fade-enter-to{
transform: translateY(0px);
/* opacity: 1; */
}
/* 끝날시 스타일 */
/* ps.퇴장은 enter를 leave로 바꿔주면 된다. */
.fade-leave-from{
opacity: 1;
}
/* 시작시 스타일 */
.fade-leave-active{
transition: all 1s;
}
.fade-leave-to{
opacity: 0;
}
.....
반응형
'Vue.js' 카테고리의 다른 글
Vue.js 라이프 사이클(LifeCycle) (0) | 2023.04.01 |
---|---|
Vue.js 정렬, 데이터보존 [...array] (0) | 2023.04.01 |
Vue.js input값 받기 (v-model), watcher (데이터 감시) (0) | 2023.04.01 |
Vue.js props, custom event (자식에서 부모 데이터 수정) (0) | 2023.04.01 |
Vue.js 부모데이터를 자식컴포넌트로 - Props (0) | 2023.03.31 |