Vue 문서의 사용자 정의 전환 기능 적용 사례 분석

Vue 사용자 정의 전환 기능은 요소가 삽입, 업데이트 및 삭제될 때 전환 효과의 특정 동작을 제어하는 ​​데 사용됩니다. 이 함수는 전환할 요소, 전환 클래스 이름, 전환을 완료하기 위한 콜백 함수를 포함한 매개변수 개체를 허용합니다.

Vue에서는 CSS 클래스 이름을 통해 전환 효과를 얻을 수 있습니다. Vue가 전환 효과를 처리할 때 특정 순서로 요소에 전환 클래스 이름을 추가하여 애니메이션 효과를 트리거합니다. 예를 들어 "v-enter" 및 "v-enter-active" 클래스 이름은 요소가 삽입될 때 추가되고 요소가 삽입된 후에 제거됩니다.

그러나 Vue의 기본 전환 효과는 약간 단조롭고 다양한 시나리오의 요구 사항을 충족하기 어렵습니다. 이 시점에서 Vue에서 제공하는 사용자 정의 전환 기능을 사용하면 보다 자유롭고 유연한 전환 효과를 얻을 수 있습니다.

아래에서는 사용자 정의 전환 기능의 사용법을 예시를 통해 자세히 소개하겠습니다.

사용자 정의 전환 기능 예제

Vue를 사용하여 전환 기능을 사용자 정의하는 방법을 보여주기 위해 이미지 캐러셀 구성 요소를 예로 들어 보겠습니다. 이 구성 요소는 자동 캐러셀 및 사진 수동 전환을 실현할 수 있습니다. 이미지의 전환 효과를 얻기 위해 사용자 정의 전환 기능을 사용하겠습니다.

구성 요소 템플릿

먼저 표시 이미지와 이미지를 수동으로 전환하기 위한 버튼이 포함된 캐러셀 구성 요소 템플릿을 정의합니다.

<template>
  <div class="carousel">
    <transition @before-enter="beforeEnter" @enter="enter" @leave="leave">
      <img :src="currentImg" key="currentImg" class="image" />
    </transition>
    <div class="button-group">
      <button @click="prev">Prev</button>
      <button @click="next">Next</button>
    </div>
  </div>
</template>

구성 요소 데이터 및 기능

다음으로 구성 요소 속성 및 계산의 데이터와 계산을 정의합니다. 메소드:

<script>
export default {
  data() {
    return {
      imgs: [
        "https://placekitten.com/g/300/200",
        "https://placekitten.com/g/300/210",
        "https://placekitten.com/g/300/220"
      ],
      currentIndex: 0
    };
  },
  computed: {
    currentImg() {
      return this.imgs[this.currentIndex];
    }
  },
  methods: {
    prev() {
      this.currentIndex = (this.currentIndex - 1 + this.imgs.length) % this.imgs.length;
    },
    next() {
      this.currentIndex = (this.currentIndex + 1) % this.imgs.length;
    },
    beforeEnter(el) {
      el.style.opacity = 0;
    },
    enter(el, done) {
      const delay = el.dataset.index * 1000;
      setTimeout(() => {
        el.style.transition = "opacity 1s";
        el.style.opacity = 1;
        done();
      }, delay);
    },
    leave(el, done) {
      el.style.transition = "opacity 1s";
      el.style.opacity = 0;
      setTimeout(() => {
        done();
      }, 1000);
    }
  }
};
</script>

그중 imgs 배열에는 회전해야 하는 모든 이미지 링크가 포함되어 있으며 currentIndex는 현재 표시된 이미지 인덱스를 나타냅니다. currentImg 함수는 현재 이미지에 대한 링크를 반환합니다.

prev 및 next 메소드는 이미지를 수동으로 전환하는 데 사용됩니다. beforeEnter, Enter 및 Leave는 각각 요소 삽입, 업데이트 및 삭제 중 전환 효과에 해당하는 사용자 정의 전환 기능입니다.

전환 전환 기능에서는 setTimeout을 사용하여 각 사진을 서로 다른 시점에 표시하는 효과를 얻습니다. Leave 전환 함수에서는 지연 함수를 사용하여 요소 노드를 파괴하기 전에 애니메이션 효과가 완료될 때까지 기다립니다.

요약

위의 예를 통해 Vue 사용자 정의 전환 함수에서 전달된 el 매개변수를 통해 전환 효과의 특정 구현을 제어할 수 있음을 알 수 있습니다. 실제 개발에서는 보다 유연하고 자유로운 전환 효과를 달성하기 위해 특정 요구 사항에 따라 다양한 전환 기능을 사용자 정의할 수 있습니다.

마지막으로 전환 클래스 이름이 요소에 추가되기 전에 Vue의 사용자 정의 전환 기능을 실행해야 합니다. 그렇지 않으면 전환 효과가 트리거되지 않습니다.

위 내용은 Vue 문서의 사용자 정의 전환 기능 적용 사례 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!