Vue에서 명명 된 전환의 힘

vue.js는 DOM에 삽입 될 때 요소 또는 구성 요소가 시각적으로 렌더링되는 방법, 예를 들어 페이딩, 미끄러짐 또는 기타 시각 효과와 같이 다양한 방법을 제공합니다. 이러한 기능의 거의 모든 기능은 단일 구성 요소 인 전이 구성 요소를 기반으로합니다.

간단한 예는 부울 값을 기반으로 한 v-if 입니다. 부울이 참되면 요소가 나타납니다. 거짓이면 요소가 사라집니다. 일반적 으로이 요소가 나타나고 갑자기 사라지지만 전이 구성 요소를 사용하면 시각적 효과를 제어 할 수 있습니다.

<transition><div v-if="isVisible"> 눈에 띄나요?</div></transition>

많은 기사는 Sarah Drasner, Nicolas Udy 및 Hassan Djirdeh와 같은 전환 구성 요소에 대한 좋은 소개를 제공합니다. 각 기사는 VUE 전환 구성 요소의 다른 측면을 자세히 설명합니다. 이 기사는 전환 구성 요소의 한 측면에 중점을 둘 것입니다. "명명"될 수 있습니다.

<transition name="fade"><div v-if="isVisible"> 눈에 띄나요?</div></transition>

이 속성에 의해 가져온 초기 변경은 전환 시퀀스 동안 요소에 주입 된 CSS 클래스가 주어진 이름으로 접두사를한다는 것입니다. 기본적으로 위의 v-enter 대신 fade-enter 됩니다. 이 단일 속성은이 간단한 옵션보다 훨씬 더 많은 것을 가지고 있습니다. VUE 및 CSS의 특정 기능을 활용하여 흥미로운 결과를 얻는 데 사용될 수 있습니다.

고려해야 할 또 다른 점은 이름 속성이 바인딩 될 수 있다는 것입니다.

<transition :name="currentTransition"><div v-if="isVisible"> 눈에 띄나요?</div></transition>

이 예에서는 전환의 이름이 currentTransition 에 의해 구문 분석 된 값으로 명명됩니다. 이 간단한 변경은 애플리케이션 애니메이션에 대한 또 다른 옵션 및 기능 계층을 제공합니다. 정적 및 동적 명명 전환을 사용하여 프로젝트는 응용 프로그램 전체에 적용 할 수있는 일련의 사전 구축 전환을 가질 수 있으며, 기존 전환에 적용되는 구성 요소를 확장하고, 응용 프로그램 전후에 사용 된 전환 전환을 스위치 전환을 선택할 수 있으며, 목록의 전류 상태를 기반으로 목록의 개별 요소가 위치로 어떻게 전환되는지 제어 할 수 있습니다.

이 기사는 이러한 기능을 탐색하고 사용 방법을 설명하는 것을 목표로합니다.

이름 지정이 전환 될 때 어떻게됩니까?

기본적으로 전환 구성 요소를 사용할 때 특정 클래스를 특정 순서로 요소에 적용합니다. 이 클래스는 CSS에서 사용할 수 있습니다. CSS가 없으면 이러한 클래스는 실제로 요소에 영향을 미치지 않습니다. 따라서 이러한 특성의 CSS가 필요합니다.

 .배,
.V-leave-to {
  불투명도 : 0;
}

.V- 입학자,
.V-leave-active {
  전환 : 0.5S;
}

이로 인해 요소가 0.5 초 동안 소멸되고 아웃됩니다. 전환의 약간의 변화는 사용자에게 우아한 시각적 피드백을 제공합니다. 그러나 여전히 고려해야 할 문제가 있습니다. 그러나 첫째, 명명 전환의 차이점은 무엇입니까?

 .fade-enter,
.fade-leave-to {
  불투명도 : 0;
}

.Fade-Enter-Active,
.fade-leave-active {
  전환 : 0.5S;
}

기본적으로 동일한 CS이지만 v- 대신 접두사로 fade- 사용합니다. 이 이름 지정은 전환 구성 요소의 기본 클래스 이름을 사용할 때 발생할 수있는 문제를 해결합니다. v- 접두사는 실제로 클래스를 글로벌로 만듭니다. 특히 응용 프로그램 루트 레벨에서 CSS를 스타일 블록에 배치 할 때 특히 클래스를 전 세계로 만듭니다. 이렇게하면 실제로 전체 응용 프로그램의 이름 속성없이 * 모든 * 전환이 동일한 전환 효과를 사용하게됩니다. 소규모 응용 프로그램의 경우 충분할 수 있지만 더 크고 더 복잡한 응용 분야에서는 모든 것이 반 후에 사라져야하는 것은 아니기 때문에 비주얼이 나쁜 시각화로 이어질 수 있습니다.

이름 지정 전환은 개발자에게 프로젝트 전반에 걸쳐 다른 요소 또는 구성 요소를 시각적으로 삽입하거나 삭제하는 방법에 대한 제어 수준을 제공합니다. 그렇게하는 습관을 발전시키기 위해 모든 전환을 명명하는 것이 좋습니다. 응용 프로그램에 하나의 전환 효과 만 있더라도 향후 새로운 전환 효과를 추가해야 할 수도 있습니다. 기존 전환은 프로젝트에서 명명되었으며 새로운 전환을 추가하려는 노력을 단순화합니다.

일련의 전환 효과를 구축하십시오

명명 전환은 간단하지만 매우 유용한 프로세스를 제공합니다. 일반적인 관행은이를 사용하는 구성 요소의 일부로 전환 클래스를 만드는 것일 수 있습니다. 스코어 성분 스타일의 또 다른 일반적인 관행이 완료되면 이러한 클래스는 해당 구성 요소에 대해서만 사용할 수 있습니다. 두 개의 다른 구성 요소가 스타일 블록에서 유사한 전환을 갖는 경우 코드를 반복하고 있습니다.

따라서 Application Root 디렉토리의 스타일 블록, 일반적으로 app.vue 파일의 스타일 블록에 전환 CSS를 유지하는 것을 고려해 봅시다. 대부분의 프로젝트에서 조정 및 추가를 쉽게 검색하기 위해 스타일 블록의 마지막 부분에 넣었습니다. 이 위치에 CSS를 저장하여 전환 효과가 애플리케이션 전반에 걸쳐 전환 구성 요소를 사용하는 데 사용할 수 있습니다. 다음은 일부 프로젝트의 몇 가지 예입니다.

 .fade-enter,
.fade-leave-to {불투명도 : 0; }
.Fade-Enter-Active,
.fade-leave-active {전이 : 0.5s; }

.slide-enter {
  불투명도 : 0;
  변환 : scale3d (2, 0.5, 1) translate3d (400px, 0, 0);
}

.slide-enter-to {transform : scale3d (1, 1, 1); }
.slide-enter-active,
.slide-leave-active {전이 : 0.5S 입방-베 지어 (0.68, -0.55, 0.265, 1.55); }
.slide-leave {transform : scale3d (1, 1, 1); }

.slide-leave-to {
  불투명도 : 0;
  변환 : scale3d (2, 0.5, 1) translate3d (-400px, 0, 0);
}

.Rotate-enter {transform : perspective (500px) Rotate3d (0, 1, 0, 90deg); }
.Rotate-enter-active,
.Rotate-Leave-Active {전이 : 0.5S; }
.Rotate-leave-to {transform : perspective (500px) rotate3d (0, 1, 0, -90deg); }

선호도와 프로젝트 요구에 따라 이러한 전환 클래스를 저장하는 몇 가지 방법이 있습니다. 앞에서 언급했듯이 첫 번째는 app.vue 파일의 스타일 블록에 모든 것을 저장하는 것입니다. 프로젝트의 모든 전환 된 SASS 부분을 프로젝트의 자산 폴더에 저장하고 응용 프로그램의 스타일 블록으로 가져올 수 있습니다.

 @import "자산/_transitions.scss";

이 방법을 사용하면 VUE 파일 외부에서 전환 컬렉션을 조정하고 추가 할 수 있습니다. 이 설정의 또 다른 장점은 프로젝트가 전환 효과를 공유하면 프로젝트간에 이러한 파일을 쉽게 전송할 수 있다는 것입니다. 프로젝트가 새로운 전환을 받으면 기본 프로젝트 파일을 터치하지 않고 추가 된 컨텐츠를 다른 프로젝트로 쉽게 전송할 수 있습니다.

SASS 대신 CSS를 사용하는 경우 파일을 프로젝트의 종속성으로 포함시킬 수 있습니다. 프로젝트의 자산 폴더에 파일을 저장하고 main.js 파일에 require 사항을 제출함으로써이를 수행 할 수 있습니다.

 요구 사항 ( "@/assets/transitions.css");

또 다른 옵션은 전환 스타일을 정적 CSS 파일에 저장하는 것입니다.이 파일은 프로젝트의 공개 폴더 또는 서버에 직접 저장할 수있는 정적 CSS 파일에 저장하는 것입니다. 이것은 일반적인 CSS 파일이므로 빌드 또는 배포 할 필요가 없습니다. index.html 파일에 링크 참조를 포함하십시오.

<link href="/css/transitions.css" rel="stylesheet" type="text/css">

이 파일은 모든 프로젝트를 공유하기 위해 CDN에 잠재적으로 저장 될 수 있습니다. 파일이 업데이트 될 때마다 변경 사항이 참조되는 모든 장소에서 변경 사항을 즉시 사용할 수 있습니다. 새 전환 이름이 만들어지면 기존 프로젝트는 필요에 따라 새 이름을 사용하기 시작할 수 있습니다.

이제 잠시 느리게하겠습니다

프로젝트 전반에 걸쳐 사용할 전환 컬렉션을 구축 할 때 애니메이션이 너무 갑작 스럽거나 애니메이션이 전혀 나타나지 않기를 원하지 않는 사용자를 고려해 봅시다. 어떤 사람들은 우리 애니메이션이 너무 과장되고 불필요하다고 생각할 수도 있지만, 일부는 실제로 문제를 일으킬 수 있습니다. 얼마 전, WebKit은 가능한 전정 스펙트럼 장벽을 해결하기 위해 prefers-reduced-motion . Eric Bailey는 또한 미디어 쿼리에 대한 좋은 소개를 게시했습니다.

대부분의 경우 전환 세트의 일부로 미디어 쿼리를 갖는 것은 매우 쉽고 고려해야합니다. 부정적인 영향을 줄이기 위해 전환과 관련된 운동의 양을 줄이거 나 간단히 꺼질 수 있습니다.

다음은 내 데모 중 하나의 간단한 예입니다.

 .next-enter {
  불투명도 : 0;
  변환 : scale3d (2, 0.5, 1) translate3d (400px, 0, 0);
}

.next-enter-to {transform : scale3d (1, 1, 1); }
.next-enter-active,
.next-leave-active {전이 : 0.5S 입방-베 지어 (0.68, -0.55, 0.265, 1.55); }
.next-leave {transform : scale3d (1, 1, 1); }

.next-leave-to {
  불투명도 : 0;
  변환 : scale3d (2, 0.5, 1) translate3d (-400px, 0, 0);
}

/* 운영 체제 수준에서 애니메이션이 줄어드면 간단한 전환 사용*/
@Media 화면 및 (선호 감소 모션 : 감소) {
  .next-enter {
    불투명도 : 0;
    변환 : translate3d (100px, 0, 0);
  }

  .next-enter-active,
  .next-leave-active {전이 : 0.5s; }

  .next-leave-to {
    불투명도 : 0;
    변환 : translate3d (-100px, 0, 0);
  }
}

이 예에서는 다소 과장된 전환을 취해 더 간단하게 만들었습니다. 애니메이션은 탄성 완화 효과로 왼쪽으로 이동 한 슬라이딩 애니메이션입니다. 누군가의 모션 환경 설정이 설정되면, 애니메이션은 더 단축 거리 (더 느리게)로 더 간단한 전환이되고 페이드를 유지합니다. 우리가 그것들을 끄고 싶다면, 우리는 transition 속성으로 클래스를 참조하고 그 값을 none 으로 설정하면됩니다.

이를 테스트하려면 해당 운영 체제에서 확인란을 찾고 선택해야합니다. Windows에서는<kbd>控制面板> 易于访问中心> 使计算机更容易查看</kbd>; "모든 불필요한 애니메이션을 닫으십시오 (가능하면). Mac에서<kbd>系统偏好设置> 辅助功能> 显示</kbd>; "스포츠 감소"를 찾으십시오. 최신 iOS 장치에는<kbd>辅助功能</kbd>아래에서 유사한 설정이 있습니다.

전환 세트를 유연하게 유지합시다

이 전환 세트를 사용하면 융통성에 문제가있을 수 있습니다. 예를 들어, 요소에 약간 느린 페이딩 시간이 필요한 경우 어떻게해야합니까? 효과의 다른 모든 것을 변경할 수 없다고 가정하면 transition-duration 변경하십시오. 완전히 새로운 전환 이름을 만들지 않고 조정하는 방법이 있습니다.

가장 쉬운 방법은 전이 구성 요소 내의 요소에서 인라인 스타일을 직접 사용하는 것입니다.

<transition name="fade"><div style="transition-duration: 6s;" v-if="isVisible"> 이것은 기간이 다릅니다</div></transition>

이러한 변경은 VUE에서 제공하는 다양한 방법 및 클래스를 처리 할 수 ​​있습니다.

예를 들어 동적 구성 요소를 수행하기 위해 is 속성으로 구성 요소 요소를 사용한다고 가정 해 봅시다.

<transition mode="out-in" name="fade"><component :is="currentComponent"></component></transition>

이 동적 구성 요소를 사용하더라도 전환 효과의 특성을 조정할 수있는 옵션이 있습니다. 마찬가지로, 구성 요소의 루트 요소에 배치 될 구성 요소 요소에 인라인 스타일을 적용 할 수 있습니다. 루트 요소는 또한 전환 클래스를 수신하므로 속성을 직접 무시할 것입니다.

<transition mode="out-in" name="fade"><component :is="currentComponent" style="transition-duration: 6s;"></component></transition>

또 다른 옵션은 소품을 구성 요소에 전달하는 것입니다. 이런 식으로 필요한 변경 사항은 구성 요소의 코드를 통해 루트 요소에 적용될 수 있습니다.

<transition mode="out-in" name="fade"><component :is="currentComponent" duration="6s"></component></transition>

<template><div :style="`transition-duration: ${duration}`"> 구성 요소 1</div></template>
<script>
export default {
  name: "component-one",
  props: {
    duration: String
  }
};
</script>

또한 구성 요소 스타일 블록 내부, 특히 범위 내에서 전환 클래스의 속성을 무시할 수 있습니다.

 .Fade-Enter-Active,
.fade-leave-active {전이 기간 : 1s; }

이 경우, 구성 요소의 페이드 아웃 지속 시간은 전 세계적으로 반 초가 아닌 1 초가됩니다. 한 걸음 더 나아가 시퀀스의 각 측면에 대해 다른 지속 시간을 설정할 수도 있습니다.

 .fade-enter-active {전이 기간 : 1s; }
.fade-leave-active {전이 기간 : 2s; }

필요에 따라 구성 요소 내에서 모든 글로벌 전환 클래스를 변경할 수 있습니다. 클래스 구조 이외의 변화 속성만큼 유연하지는 않지만 경우에 따라 여전히 매우 유용합니다.

보시다시피, 미리 빌드 전환 컬렉션을 사용하더라도 여전히 유연한 옵션이 있습니다.

동적 전환

우리가 Vue의 전환 구성 요소 로이 흥미로운 일을 모두 할 수있는 후에도 또 다른 흥미로운 기능은 여전히 ​​탐구되기를 기다리고 있습니다. 전환 구성 요소의 이름 속성은 동적 일 수 있습니다. 즉, 현재 사용중인 전환을 마음대로 변경할 수 있습니다.

이는 코드의 다른 상황에 따라 다른 애니메이션 효과를 갖도록 전환을 변경할 수 있음을 의미합니다. 예를 들어, 질문에 대한 답변에 따라 전환을 변경하고 사용자 상호 작용을 기반으로 전환을 결정하며 목록 자체의 현재 상태에 따라 다른 전환을 사용하도록합니다.

이 세 가지 예를 살펴 보겠습니다.

예 1 : 답변에 따라 전환을 변경하십시오

이 예에서는 대답 할 간단한 수학 문제가 있습니다. 두 개의 숫자를 무작위로 선택하면 합계를 제공해야합니다. 그런 다음 버튼을 클릭하여 답변을 예상 대답과 비교하십시오. 작은 알림은 대답이 참인지 거짓인지를 나타내는 방정식 위에 나타납니다. 대답이 올바른 경우, 알림은 상향 및 다운 애니메이션의 긍정적 인 전환을 나타내는 제안을 제공합니다. 답변이 잘못되면 알림이 왼쪽과 오른쪽으로 이동하여 머리가 흔들리고 부정을 나타냅니다.

그 뒤에있는 논리는 복잡하지 않으며 전환 설정은 복잡하지 않습니다. 이것은 HTML입니다.

<transition :name="currentTransition"><div v-if="answerChecked"> {{ 응답 }}</div></transition>

자연은 매우 간단합니다. 우리는 전환에 바운드 이름이 있고 알림 Div에서 v-if 있습니다. 또한 응답에 따라 알림을 장식하기 위해 True 또는 False 클래스를 적용했습니다.

전환 CSS는 다음과 같습니다.

 . 양성 엔터-작용 {애니메이션 : 긍정적 인 1s; }
@keyframes positive {
  0% {transform : translate3d (0, 0, 0); }
  25% {transform : translate3d (0, -20px, 0); }
  50% {transform : translate3d (0, 20px, 0); }
  75% {transform : translate3d (0, -20px, 0); }
  100% {transform : translate3d (0, 0, 0); }
}

.negative-enter-active {애니메이션 : 음수 1s; }
@keyframes negative {
  0% {transform : translate3d (0, 0, 0); }
  25% {transform : translate3d (-20px, 0, 0); }
  50% {변환 : Translate3d (20px, 0, 0); }
  75% {transform : translate3d (-20px, 0, 0); }
  100% {transform : translate3d (0, 0, 0); }
}

CSS 애니메이션을 사용하여 위아래로, 왼쪽 및 오른쪽 효과를 달성하는 것을 알 수 있습니다.

다음은 JavaScript 코드입니다.

 방법 : {
  randomproblem : function () {
    this.a = math.floor (math.random () * math.floor (10));
    this.b = math.floor (math.random () * math.floor (10));
  },
  점검 : function () {
    this.response = this.a this.b === parseint (this.answer);
    this.answerChecked = true;
    이 .currentTransition = this.Response? '긍정적': '부정적인';
  },
  재설정 : function () {
    this.answer = null;
    this.answerChecked = false;
    this.randomproblem ();
  }
}

다음은 방정식을 설정하기위한 randomProblem 방법입니다. check 방법은 제공된 답변을 정답과 비교하여 사용할 전환 효과를 결정합니다. 그런 다음 모든 것을 재설정하는 간단한 reset 방법이 있습니다.

이것은 단순한 예일뿐입니다. 또 다른 가능한 예는 알림이 중요한지 아닌지에 따라 두 가지 다른 효과를 가진 알림입니다. 메시지가 그다지 중요하지 않은 경우 사용자의 눈이 현재 작업을 떠나지 못하게하는 미묘한 애니메이션을 사용할 수 있습니다. 중요하다면 더 직접적인 애니메이션을 사용하여 눈이 알림을 찾도록 강요 할 수 있습니다.

예 2 : 사용자 상호 작용에 따라 전환을 변경합니다

우리가 구축 할 수있는 또 다른 것은 일종의 회전 목마입니다. 이것은 슬라이드 프레젠테이션, 사진 갤러리 또는 일련의 지침 일 수 있습니다. 기본 아이디어는 사용자에게 순서대로 정보를 제시해야한다는 것입니다. 이 데모에서 사용자는 계속해야 할시기와 앞으로 또는 뒤로 이동할지 여부를 결정할 수 있습니다.

이것은 또한 상당히 간단한 설정입니다. 이 예제는 다소 슬라이드 프리젠 테이션 유형 사례입니다. 하단의 두 버튼은 슬라이딩 전환으로 두 구성 요소 사이를 전환합니다. 실제 프로젝트에는 현재 슬라이드에 따라 더 많은 구성 요소가 있거나 구성 요소 컨텐츠의 논리를 변경할 수 있습니다. 이 예제는 아이디어를 보여주기 위해 간단하게 유지됩니다.

이것은 HTML입니다.

<transition :name="currentTransition" mode="out-in"><component :is="slides[currentSlide]"></component></transition>

구성 요소가 바인딩을 통해 전환 될 때마다 구성 요소 요소의 속성 is 것을 알 수 있습니다.

이것은 CSS입니다.

 .next-enter {
  불투명도 : 0;
  변환 : scale3d (2, 0.5, 1) translate3d (400px, 0, 0);
}

.next-enter-to {transform : scale3d (1, 1, 1); }
.next-enter-active,
.next-leave-active {전이 : 0.5S 입방-베 지어 (0.68, -0.55, 0.265, 1.55); }
.next-leave {transform : scale3d (1, 1, 1); }

.next-leave-to {
  불투명도 : 0;
  변환 : scale3d (2, 0.5, 1) translate3d (-400px, 0, 0);
}

.prev-enter {
  불투명도 : 0;
  변환 : scale3d (2, 0.5, 1) translate3d (-400px, 0, 0);
}

.prev-enter-to {transform : scale3d (1, 1, 1); }
.prev-enter-active,
.prev-leave-active {전이 : 0.5S 입방-베 지어 (0.68, -0.55, 0.265, 1.55); }
.prev-leave {transform : scale3d (1, 1, 1); }

.prev-leave-to {
  불투명도 : 0;
  변환 : scale3d (2, 0.5, 1) translate3d (400px, 0, 0);
}

/* 운영 체제 수준에서 애니메이션이 줄어드면 간단한 전환 사용*/
@Media 화면 및 (선호 감소 모션 : 감소) {
  .next-enter {불투명도 : 0; 변환 : translate3d (100px, 0, 0); }
  .next-enter-active,
  .next-leave-active {전이 : 0.5s; }
  .next-leave-to {불투명도 : 0; 변환 : translate3d (-100px, 0, 0); }

  .prev-enter {불투명도 : 0; 변환 : translate3d (-100px, 0, 0); }
  .prev-enter-active,
  .prev-leave-active {전이 : 0.5s; }
  .prev-leave-to {불투명도 : 0; 변환 : translate3d (100px, 0, 0); }
}

여기에는 사용자가 "다음"버튼을 클릭 할 때 "다음"버튼과 "이전"버튼의 경우 "다음"버튼에 대한 두 가지 전환이 있습니다. 각각은 기본적으로 transform 속성을 사용하여 구성 요소를 적절한 방향으로 밀어 넣지 만 만화 효과를위한 압박 효과를 만들기위한 추가 정보가 있습니다. 우리는 또한 prefers-reduced-motion 사용하여 애니메이션을 더 간단한 페이드 효과로 변경하고 적절한 방향으로 약간 스 와이프합니다.

이제 JavaScript의 경우 :

 방법 : {
  Changeslide : 함수 (dir) {
    this.currentslide = dir === 'next'? 이 .currentslide 1 : this.currentslide -1;
    this.currenttransition = dir;
  }
}

각 버튼은 클릭 이벤트에서 changeSlide 메소드를 호출하고 나타나는 방향을 전달합니다. 그런 다음 현재 슬라이드가 무엇인지 추적하는 논리가 있습니다. 단일 라인 코드 제어 사용 전환. "다음"버튼은 방향으로 "다음"을 전달하기 때문에 CSS의 "다음"전환에 해당합니다. "이전"버튼에 대해서도 마찬가지입니다. 사용자가 버튼을 클릭 할 때마다 응용 프로그램은 사용할 전환이 자동으로 알고 있습니다. 따라서 사용자가 순서대로 향하는 방향에 대한 컨텍스트를 제공 할 수있는 좋은 전환 효과가 있습니다.

예 3 : 목록 상태에 따라 전환을 변경합니다

마지막 예를 들어, transition-group 구성 요소 내에서 목록의 현재 상태를 기반으로 전환을 변경하는 방법을 배웁니다. 여기의 아이디어는 항목이 업데이트 될 때마다 다른 전환을 사용 할 때마다 목록입니다.

이 예에서는 오른쪽의 도시 목록과 왼쪽의 빈 목록을 표시합니다. 오른쪽에서 도시를 선택할 때 왼쪽의 공백을 채 웁니다. 첫 번째 도시는 위에서부터 미끄러 져 전망으로 사라집니다. 마지막 도시의 다음 도시는 이전 전환에 따라 오른쪽이나 왼쪽에서 미끄러 져 들어갑니다. 마지막 도시는 아래에서 미끄러 져 들어갑니다.

이것은 HTML입니다.

<transition-group :name="currentListTransition" tag="ul"><li :key="item" v-for="(item, index) in selectedItems"> {{item}}</li></transition-group>

평소와 같이 상당히 간단한 설정. CSS의 전환은 다음과 같습니다.

 .top-enter-active,
.top-leave-active {전이 : 0.5s; }
.top-enter,
.top-leave-to {
  불투명도 : 0;
  변환 : translate3d (0, -40px, 0);
}

.top-move {
  불투명도 : 0.5;
  전환 : 0.5S;
}

.left-enter-active,
.left-leave-active {전이 : 0.5s; }
.Left-enter,
.left-leave-to {
  불투명도 : 0;
  변환 : translate3d (-40px, 0, 0);
}

.Left-Move {
  불투명도 : 0.5;
  전환 : 0.5S;
}

. 오른쪽 입력,
.right-leave-active {전이 : 0.5s; }
. 직각,
.right-leave-to {
  불투명도 : 0;
  변환 : translate3d (40px, 0, 0);
}

. right-move {
  불투명도 : 0.5;
  전환 : 0.5S;
}

.Bottom-enter-active,
.bottom-leave-active {전이 : 0.5s; }
.Bottom-enter,
.bottom-leave-to {
  불투명도 : 0;
  변환 : translate3d (0, 30px, 0);
}

.bottom-move {
  불투명도 : 0.5;
  전환 : 0.5S;
}

/* 운영 체제 수준에서 애니메이션이 줄어든 경우 전환을 닫습니다*/
@Media 화면 및 (선호 감소 모션 : 감소) {
  .top-enter-active,
  .top-leave-active {전이 : 없음; }
  .Top-Move {전환 : 없음; }
  .left-enter-active,
  .left-leave-active {전이 : 없음; }
  .Left-Move {전환 : 없음; }
  . 오른쪽 입력,
  .right-leave-active {전환 : 없음; }
  .right-move {전환 : 없음; }
  .Bottom-enter-active,
  .bottom-leave-active {전이 : 없음; }
  .Bottom-Move {전환 : 없음; }
}

보시다시피, 가능한 각 도시 방향은 전환으로 빈 목록에 나타납니다.

이제 JavaScript의 경우 :

 방법 : {
  Choosecity : 함수 (색인) {
    selectedLength = this.SelectedItems.length를하자;
    Citieslength = this.cities.length;
    clt = this.currentlistransition을하자;

    if (selectedLength === 0) {
      clt = '상위';
    } else if (selectedLength> 0 && selectedLength <citieslength clt="clt" this.currentlisttransition="CLT;" this.selecteditems.push this.cities.splice><p> <code>chooseCity</code> 방법은 각 도시를 선택할 때 발생하는 일을 처리합니다. 우리가 주로 염려하는 것은 방법 중간에 일련의 <code>if</code> and <code>if/else</code> 문입니다. 도시가 선택되면 논리는 선택된 도시를 밀어 넣는 <code>selectedItems</code> 배열의 현재 길이를 살펴 봅니다. 길이가 0이면 첫 번째 도시이므로 전환이 상단에서 들어가게됩니다. 길이가 0과 총 도시 목록 사이 인 경우 전환은 오른쪽 또는 왼쪽이어야합니다. 사용 된 새로운 방향은 이전 전이 방향의 방향을 기반으로합니다. 마지막으로, 마지막 도시를 선택하면 바닥 전환으로 변경됩니다. 다시 말하지만, 우리는 <code>prefers-reduced-motion</code> 사용 하여이 경우 전환을 완전히 닫습니다.</p>
<p> 목록 전환을 변경하는 또 다른 옵션은 선택한 항목의 유형에 따라 변경하는 것입니다. 예를 들어, 동해안과 서해안 도시, 각 도시마다 전환이 다릅니다. 목록에 추가 된 항목 수를 기준으로 전환을 변경하는 것을 고려하십시오. 예를 들어, 5 개의 항목마다 다른 전환이 있습니다.</p>
<h3 id="안녕-모든-전환에-감사드립니다"> 안녕, 모든 전환에 감사드립니다</h3>
<p> 이러한 모든 예와 아이디어를 마친 후, 귀하의 프로젝트에서 VUE의 전환 구성 요소를 활용하는 것이 좋습니다. 앱에 전환 및 애니메이션을 추가하여 사용자에게 컨텍스트와 관심사를 제공 할 수있는 가능성을 탐색하십시오. 많은 경우에, 그러한 추가는 구현하기가 매우 쉽습니다. 거의 추가하지 않는 것이 유감입니다. Vue는 흥미롭고 매우 유용한 상자 외 기능인 전환 구성 요소를 제공합니다.</p>
<p> 건배.</p></citieslength>

위 내용은 Vue에서 명명 된 전환의 힘의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!