Vue 전환 구성 요소를 사용하는 방법

Vue는 <transition>전환 효과를 적용하고 DOM을 쉽게 애니메이션화 할 수 있는 기본 제공 구성 요소를 제공합니다.

소개

Vue는 <transition>전환 효과를 적용하고 DOM에 애니메이션을 쉽게 적용 할 수 있는 기본 제공 구성 요소를 제공합니다 . 여는 태그와 닫는 태그 사이에있는 모든 것을 애니메이션하는 데 사용할 수있는 특수 구성 요소입니다.

하나의 요소 구성 요소 와 함께 애니메이션 할 수 있습니다 <transition>.

<transition>구성 요소 내부에 여러 요소 를 가질 수 있지만 v-if 또는 v-show를 사용하여 이러한 요소의 조건을 적용해야합니다 . 여러 구성 요소에 대해 구성 요소를 사용할 수 있습니다 . <transition-group>

데모 시나리오

기본 제공 <transition>구성 요소를 사용하면 경고 알림이 나타나고 5 초 후에 위로 슬라이드됩니다 . 예를 들면 다음과 같습니다.

최신 공식 문서에 따르면 진입 / 퇴장 전환을위한 6 개의 CSS 전환 클래스 가 있습니다. 6 개의 클래스를 모두 정의 할 필요는 없으며 전환 / 애니메이션 유형에 따라 다릅니다.

v-접두사는 이름이없는 요소를 사용할 때 기본값<transition> 입니다. 여기서 v-접두사는 접두사로 대체됩니다 slide-fade-. 예를 들어, 요소 여는 태그 slide-fade-enter-from에서 이름 이 되고 선언 <transition>됩니다.

<transition name="slide-fade">

이 명명에는 이유가 있습니다. 두 개의 서로 다른 애니메이션이있는 슬라이드 에 대한 전환 입력페이드를 위한 전환을 떠나 이 데모에 대한 경고 알림을 - 시나리오.

전환 클래스 작동 방식

진입 / 퇴장 전환에는 6 개의 클래스가 적용됩니다.

  1. slide-fade-enter-from: 진입 할 시작 상태. 요소가 삽입되기 전에 추가되고 요소가 삽입 된 후 한 프레임이 제거됩니다. 속성 에 의해 트리거되었습니다 appear.
  2. slide-fade-enter-active:로 요소에 추가되고 v-enter-from전환 / 애니메이션이 완료되면 제거됩니다. 전환 전환에 대한 시간 기간, 지연 및 여유 곡선이 정의됩니다. 예를 들어 애니메이션을 시작하기 위해 전환이 약 5 초 지연됩니다.
  3. slide-fade-enter-to: 들어가는 종료 상태. 요소가 삽입 된 후 (동시에 v-enter-from제거됨) 한 프레임이 추가 되고 전환 / 애니메이션이 완료되면 제거됩니다.
  4. slide-fade-leave-from: 떠날 시작 상태. 이탈 전환이 트리거되면 즉시 추가되고 한 프레임 후에 제거됩니다. 'x'버튼을 클릭하면 트리거됩니다.
  5. slide-fade-leave-active: slide-fade-enter-active.
  6. slide-fade-leave-to: 탈퇴 할 종료 상태. 이탈 전환이 트리거 된 후 (동시에 v-leave-from제거됨) 한 프레임이 추가 되고 전환 / 애니메이션이 완료되면 제거됩니다.

때때로 경고 알림이 닫히거나 자동으로 사라지고 사용자가 'x'버튼을 클릭하여 닫지 않습니다. 그래서 질문은

휴가 전환을 트리거하는 방법은 무엇입니까?

해결책은 다음과 같습니다.

<script>
    const Demo = {
      data() {
        return {
          show: true,
        };
      },
      methods: {
        closeAlert: function () {
          var v = this;
          setTimeout(function () {
            v.show = false;
          }, 10000);
        },
      },
      mounted() {
        this.closeAlert();
      },
    };
    Vue.createApp(Demo).mount("#app");
  </script>

결론

Vue Transition에는 다른 많은 멋진 기능과 중요한 개념이 있습니다. 웹 페이지 주변의 요소에 애니메이션을 적용하고 선택적으로 적용 할 수 있습니다. 그러나 사용자가 사용자 인터페이스를 이해하고 더 나은 사용자 경험을 제공 할 수 있도록 돕는 것이 중요합니다.

감사합니다.

Suggested posts

개발자가 범하는 5 가지 일반적인 CSS 실수

CSS에서 어떤 실수를 했습니까?

개발자가 범하는 5 가지 일반적인 CSS 실수

웹 개발자로 이동 통신사를 시작하는 경우 CSS는 내 경험에 비추어 볼 때 많은 개발자에게 골칫거리입니다. 그것을 배우고 숙달하는 데는 시간이 걸립니다.

Kickass GitHub 프로필 페이지를 만드는 방법

새로운 특수 리포지토리 및 GitHub 작업으로 놀라운 GitHub 프로필을 만듭니다.

Kickass GitHub 프로필 페이지를 만드는 방법

이 자습서는 비디오로도 제공됩니다.이 링크를 클릭하십시오. 이 기사에서는 눈에 잘 띄고보기 좋은 Github 프로필 페이지를 만드는 방법을 볼 수 있습니다.

Related posts

성능 최적화 된 A / B 테스트 솔루션

성능 최적화 된 A / B 테스트 솔루션

의제 : 소개 : TL;하지만 읽을 수 있습니다. A / B 테스트, CloudFront 및 Lamba @ edge에 대해 이미 알고있는 경우 AWS Lambda @ edge를 사용한 A / B 테스트로 직접 이동하십시오. A / B 테스트 란 무엇입니까? A / B 테스트는 웹 사이트의 두 가지 버전에 대한 사용자의 참여를 비교하는 데 초점을 맞춘 UX 연구 방법론입니다.

fp-ts (Typescript)에서 Option 및 둘 중 하나 사용

저는 함수형 프로그래밍을 좋아합니다. 몇 년 동안 실수를하거나 토끼 구멍을 뚫는 것으로부터 저를 몇 번 구해 주었기 때문입니다. 동일한 입력이 주어지면 출력이 항상 동일하다는 것을 알면 안심입니다.

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드는 하나 이상의 파일, 이미지, 문서, 오디오, 비디오 및 기타 파일을 서버에 업로드하기위한 구성 요소입니다. 여러 파일 선택, 진행률 표시 줄, 자동 업로드, 끌어서 놓기, 폴더 (디렉터리) 업로드, 파일을 포함하는 다양한 기능을 갖춘 HTML5 업로드 구성 요소 (<input type =”file”>)의 확장 버전입니다. 검증 등.

6 React 개발자로서 후회

내가 일찍했으면하는 것

6 React 개발자로서 후회

React는 배울 수있는 훌륭한 도구입니다. 그것은 우리가 우리 자신의 방식으로 일을 할 수있게합니다.