VUE3 기본 튜토리얼: Vue.js 전환 및 애니메이션 사용

Vue.js는 전환 및 애니메이션 구현이 매우 편리한 사용자 인터페이스 구축을 위한 진보적인 프레임워크입니다. 이 기사에서는 전환 이벤트의 스타일을 지정하고 트리거하는 방법을 포함하여 Vue.js 전환 및 애니메이션을 사용하는 방법을 다룹니다.

Transition

Vue.js에서 전환이란 요소가 삽입, 업데이트 또는 제거될 때 요소에 애니메이션 효과를 추가하는 것을 의미합니다. Vue.js는 v-transition 지시문과 전환 구성요소를 통해 전환을 구현합니다.

v-transition 지시어

v-transition 지시어는 요소가 삽입, 업데이트 또는 제거될 때 해당 전환 효과를 트리거합니다. 전환 효과는 전환 클래스 이름을 설정하여 정의할 수 있습니다. 예를 들어 요소가 삽입되면 페이드 인되고 제거되면 페이드 아웃될 수 있습니다.

<div v-transition="'fade'">
  {{ message }}
</div>

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

위 예에서는 요소의 전환 효과를 나타내기 위해 .fade 클래스 이름을 정의했습니다. .fade-enter 및 .fade-leave-to 클래스에서는 opacity 속성을 0으로 설정하여 요소가 삽입되고 제거될 때 요소의 시작 및 종료 상태를 나타냅니다. .fade-enter-active 및 .fade-leave-active 클래스에서는 전환이 적용되는 시간을 나타내기 위해 전환 속성을 설정합니다.

transition 구성 요소

transition 구성 요소는 v-transition의 사용을 단순화할 수 있습니다. 전환하려는 요소를 전환 구성요소에 배치하기만 하면 됩니다. 예를 들어, 다양한 구성요소 이름을 사용하여 들어오기, 나가기 및 동시 전환 효과를 정의할 수 있습니다.

<transition enter-active-class="fadeIn" leave-active-class="fadeOut">
  <div v-show="showDiv">{{ message }}</div>
</transition>

.fadeIn-enter-active, .fadeOut-leave-active {
  transition: opacity .5s;
}

.fadeIn-enter, .fadeOut-leave-to {
  opacity: 0;
}

.fadeOut-leave, .fadeIn-enter-to {
  opacity: 1;
}

위 예에서는 전환 구성요소를 사용하여 전환 효과 설정을 단순화했습니다. enter-active-class 및 Leave-active-class 속성을 설정하여 들어오고 나가는 전환 효과를 정의합니다. 동시에 페이드인 및 페이드아웃 클래스 이름을 설정하여 요소의 시작 및 종료 상태를 정의합니다.

Animation

Vue.js에서 애니메이션은 요소가 삽입, 업데이트 또는 제거되지 않을 때 요소에 애니메이션 효과를 추가하는 것을 의미합니다. Vue.js는 v-animation 지시문과 애니메이션 구성 요소를 통해 애니메이션을 구현합니다.

v-animation 지시어

v-animation 지시어는 요소가 삽입, 업데이트 또는 제거되지 않을 때 해당 애니메이션 효과를 트리거합니다. 애니메이션 효과는 애니메이션 클래스 이름을 설정하여 정의할 수 있습니다. 예를 들어 요소를 가리키면 요소의 크기를 조정할 수 있습니다.

<div v-animation="'hoverScale'">
  {{ message }}
</div>

.hoverScale {
  transform: scale(1);
}

.hoverScale:hover {
  transform: scale(1.5);
}

위 예에서는 요소의 애니메이션 효과를 나타내기 위해 .hoverScale 클래스 이름을 정의했습니다. .hoverScale 클래스에서는 요소의 시작 상태가 원래 크기임을 나타내기 위해 변형 속성을 설정했습니다. .hoverScale:hover 클래스에서는 변형 속성을 1.5배 확대하여 요소의 최종 상태를 표시하도록 설정했습니다.

animation 구성 요소

animation 구성 요소는 v-animation의 사용을 단순화할 수 있습니다. 애니메이션 구성 요소에 애니메이션을 적용하려는 요소를 배치하기만 하면 됩니다. 예를 들어, 다양한 구성 요소 이름을 사용하여 다양한 애니메이션 효과를 정의할 수 있습니다.

<animation name="rotate">
  <div>{{ message }}</div>
</animation>

@keyframes rotate {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

.rotate {
  animation: rotate 1s infinite;
}

위 예에서는 애니메이션 구성 요소를 사용하여 애니메이션 효과 설정을 단순화했습니다. name 속성을 설정하여 애니메이션 이름을 회전으로 정의합니다. .rotate 클래스에서는 애니메이션 속성을 설정하고 애니메이션의 속성과 지속 시간을 정의합니다. @keyframes에서는 애니메이션의 시작 및 종료 상태를 설정합니다.

Summary

Vue.js는 사용자 인터페이스에 생생한 효과를 추가할 수 있는 편리한 전환 및 애니메이션 기능을 제공합니다. v-transition 지시문과 전환 구성요소를 사용하여 요소가 삽입, 업데이트 또는 제거될 때 전환 효과를 정의할 수 있습니다. v-animation 지시어와 애니메이션 구성 요소를 사용하면 요소가 삽입, 업데이트 또는 제거되지 않을 때 애니메이션 효과를 정의할 수 있습니다. 이 튜토리얼이 Vue.js의 전환과 애니메이션을 배우는 데 도움이 되기를 바랍니다!

위 내용은 VUE3 기본 튜토리얼: Vue.js 전환 및 애니메이션 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!