반응형 Transition1 Vue.js UI 애니메이션 (Transition) - CSS 애니메이션 ex)transition 1.일반 CSS사용하는 방식 class명을 줘서 시작과 끝을 정하는 방식이다. 변수를 클래스에 담을 때 :class와같이 사용하여 설정한다. 가능한 방법이지만 Transition을 사용하면 더욱 편하다. ...... .start{ opacity: 0; transition:all 1s; } .end{ opacity: 1; } ...... 2.Vue.js제공하는 Transition사용하기 transiton을 사용하고싶은 컴포넌트를 으로 감싸주고 name으로 이름을 지어준다. 그리고 style부분에서 컴포넌트 시작시, 종료시 2가지 경우가 있다. 1)시작시 이름-enter-from, 이름-enter-active, 이름-enter-to 로 3가지 경우로 나눠주고 2.. 2023. 4. 1. 이전 1 다음 반응형