css - transition

Jaemin Jung·2022년 4월 13일
0

Vue.js

목록 보기
6/7

transition?

transition은 속성을 서서히 변화시키는 속성이다.
css에서 transition을 사용하면 부드러운 ux를 제공한다.
이 방법이 Javascript로 구현하는 것 보다 더 빠르다.

문법

transition: property yiming-function duration delay | initial | inherit
  • property: transition을 적용시킬 속성을 정한다.
  • timing-function: transition의 진행 속도를 정한다.
  • duration: transition의 총 시간을 정한다.
  • delay: transition의 시작을 연기한다.
  • initial: 기본값으로 설정한다.
  • inherit: 부모 요소의 속성값을 상속받는다.

vue transition 컴포넌트

vue에서는 transition 컴포넌트를 제공한다.
항목이 DOM에 삽입, 갱신 또는 제거 될 때 트랜지션 효과를 적용 가능하다.
조건부 렌더링 (v-if 사용)

<transition name="원하는-이름"></transition>

name을 지정하면 style 태그 내부에서 다음과 같은 클래스를 사용 가능하고,
그 안에서 원하는 효과를 줄 수 있다.

  • v-enter: enter의 시작 상태. 엘리먼트가 삽입되기 전에 적용되고 한 프레임 후에 제거됩니다.

  • v-enter-active: enter에 대한 활성 및 종료 상태. 엘리먼트가 삽입되기 전에 적용됩니다. 트랜지션 / 애니메이션이 완료되면 제거됩니다.

  • v-enter-to: 2.1.8 이상 버전에서 지원합니다. 진입 상태의 끝에서 실행됩니다. 엘리먼트가 삽입된 후 (동시에 v-enter가 제거됨), 트랜지션/애니메이션이 끝나면 제거되는 하나의 프레임을 추가했습니다.

  • v-leave: leave를 위한 시작 상태. 진출 트랜지션이 트리거 될 때 적용되고 한 프레임 후에 제거됩니다.

  • v-leave-active: leave에 대한 활성 및 종료 상태. 진출 트랜지션이 트리거되면 적용되고 트랜지션 / 애니메이션이 완료되면 제거됩니다.

  • v-leave-to: 2.1.8 이상 버전에서 지원합니다. 진출 상태의 끝에서 실행됩니다. 진출 트랜지션이 트리거되고 (동시에 v-leave가 제거됨), 트랜지션/애니메이션이 끝나면 제거되는 하나의 프레임을 추가했습니다.

profile
내가 보려고 쓰는 블로그

0개의 댓글