Vue.js UI 애니메이션 주는법 vue 문법 transition태그를 이용하기
2021. 4. 11. 23:11
<transition name="작명">중간에 애니메이션 주고싶은거</transition>트랜지션 태그로 감싸고 name="작명" 한 후에
style로 가서 이렇게 각각 3개 쓰고 스타일 주면 됌
등장 애니메이션
.작명-enter-from = 시작
.작명-enter-active
.작명-enter-to = 끝
퇴장 애니메이션
.작명-leave-from = 시작
.작명-leave-active
.작명-leave-to = 끝
넘모 간단하다 호고곡
근데 중간에 애니메이션 주고싶은거 감싸둔게 자식 컴포넌트인데
거기 안에있는 요소 애니메이션 바꾸고싶으면 어떻게 하지 ㅇㅅㅇ
'공부 > Vue.js' 카테고리의 다른 글
| Vue.js data를 감시하는 함수 watch (0) | 2021.04.11 |
|---|---|
| Vue.js input박스, 숫자 곱하기 및 더하기 (0) | 2021.04.11 |
| Vue.js 커스텀이벤트 Custom Event - 부모 컴포넌트의 데이터를 수정하고 싶을때 (0) | 2021.04.11 |
| Vue.js Props 보낼때 다양한 방법 :작명="데이터이름" (0) | 2021.04.11 |
| vue.js 컴포넌트 component 만드는 방법, Props - 깔끔하게 html 만들기 (0) | 2021.04.10 |