개시하다

좋은 아침입니다.안녕하세요.안녕하세요.
나루터입니다.
이번에는 베입니다.js에 대한transion을 볼 수 있었으면 좋겠다고 쓰여 있습니다.
Vue.js로 웹 페이지를 만드는 과정에서 "Vue.js로 애니메이션을 어떻게 그려요?"
조사 결과'transion'사용을 처음 알았기 때문에 공부를 해봤어요.
그럼 바로 해볼게요.

사용법

transition 표시로 둘러싸기

이렇게 transitionタグ 애니메이션 요소를 둘러쌉니다.
이 transion 구성 요소 내의 요소에 대해 CSS 기술 애니메이션과 같은 동작의 종류를 자동으로 부여합니다.
※ 실제 부여된 클래스(CSS)를 통해 동작을 제어하려는 요소는 v-show 또는 v-if의 지시적 표시, 숨김 행위를 수행해야 합니다.

<transition>
    <div v-show="show" class="box">BOX</div>
</transition>

CSS에서 스타일을 정의합니다.

CSS에서 스타일을 정의하면 카테고리에 애니메이션이 추가됩니다.
상태에 따라 다음 범주가 부여됩니다.
카테고리
컨디션
v-enter
시작 상태
v-enter-active
현재 상태
v-enter-to
enter의 끝 상태
v-leave
leave의 시작 상태
v-leave-active
leave의 활동 상태
v-leave-to
leave의 종료 상태

크게 다음과 같이 나뉜다. 표현할 때는 enter이고, 숨길 때는 leave계의 분류이다.
이 점을 이해한 후, 예를 들어 페이드 스타일을 만듭니다.

/* アニメーション中のスタイル */
.v-leave-active,
.v-enter-active {
    transition: opacity 1s;
}

/* 表示アニメーション */
.v-enter {
    opacity: 0;
}
.v-enter-to {
    opacity: 1;
}

/* 非表示アニメーション */
.v-leave {
    opacity: 1;
}
.v-leave-to {
    opacity: 0;
}

opacity: 1는 기본값으로 다음과 같이 생략할 수 있습니다.

.v-leave-active,
.v-enter-active {
  transition: opacity 1s;
}
.v-enter,
.v-leave-to {
  opacity: 0;
}

여러 번 바꾸다

여러 개를 설치하고 싶을 때transitionname属性에서 여러 개의transsition을 구분해서 사용할 수 있습니다.
예를 들어name 속성을basic로 설정할 때 클래스 이름은 'v-' 를 basic- 로 바꿉니다.

<transition name="basic">
    <div v-show="show" class="box">BOX</div>
</transition>

.basic-enter {
    opacity: 0;
}
.basic-enter-to {
    opacity: 1;
}

처음 그리는 동안 점프

처음에 그릴 때 작은 번호로 표시할 수도 있습니다.
이때 transitionappear属性을 지정합니다.

<transition appear>
    <div v-show="show" class="box">BOX</div>
</transition>

2010/03/28 추기

위의 예에서 담입담출을 소개했는데 슬라이드는 어떻게 합니까?소개할게요.

Top Slide

슬라이드는 위에서 시작합니다.
topside.css

.top-enter-active, .top-leave-active {
  transform: translate(0px, 0px); 
  transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}

.top-enter, .top-leave-to {
  transform: translateY(-100vh) translateY(0px);
}

슬라이드 시스템transion에서transform 속성이 중요해졌습니다.transform 속성은 이름에 따라 원소 회전, 축소, 경사 및 이동을 할 수 있습니다.

Top Left Slide

TopLeftSlide.css

.top-left-enter-active, .top-left-leave-active {
  transform: translate(0px, 0px); 
  transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}

.top-left-enter, .top-left-leave-to {
  transform: translateY(-100vh) translateX(-100vh);
}

Top Right Slide

TopRightSlide.css

.top-right-enter-active, .top-right-leave-active {
  transform: translate(0px, 0px); 
  transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}

.top-right-enter, .top-right-leave-to {
  transform: translateY(-100vh) translateX(100vh);
}

Bottom Slide

BottomSlide.css

.bottom-enter-active, .bottom-leave-active {
  transform: translate(0px, 0px);
  transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}

.bottom-enter, .bottom-leave-to {
  transform: translateY(100vh) translateY(0px);
}

Bottom Left Slide

BottomLeftSlide.css

.bottom-left-enter-active, .bottom-left-leave-active {
  transform: translate(0px, 0px);
  transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}

.bottom-left-enter, .bottom-left-leave-to {
  transform: translateY(100vh) translateX(-100vh);
}

Bottom Right Slide

BottomRightSlide.css

.bottom-right-enter-active, .bottom-right-leave-active {
  transform: translate(0px, 0px);
  transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}

.bottom-right-enter, .bottom-right-leave-to {
  transform: translateY(100vh) translateX(100vh);
}

Left Slide

LeftSlide.css

.left-enter-active, .left-leave-active {
  transform: translate(0px, 0px);
  transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}

.left-enter, .left-leave-to {
  transform: translateX(-100vw) translateX(0px);
}

Right Slide

RightSlide.css

.right-enter-active, .right-leave-active {
  transform: translate(0px, 0px);
  transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}

.right-enter, .right-leave-to {
  transform: translateX(100vw) translateX(0px);
}

이상.

최후

끝까지 읽어주셔서 감사합니다.
또한 앞서 소개한 것은transition 처리의 기초이기 때문에 응용공식 사이트을 보십시오.
만약 착오 등 건의, 지적 등이 있으면 나에게 알려주세요.
Vue.js 기반 (설치)
Vue.js에 대한 기초 (기본 문법)
Vue.js 기반 정보(Vue-roter)
가능하면 보세요.