vue.js의 전환 시스템을 사용하면 요소가 DOM에서 삽입되거나 제거 될 때 전환 효과를 자동으로 적용 할 수 있습니다. vue.js는 적시에 CSS 전환 또는 애니메이션을 트리거하며 전환 프로세스 중에 맞춤형 DOM 작업을 수행하기 위해 해당 JavaScript 후크 기능을 제공 할 수도 있습니다.
전환 효과를 적용하려면 대상 요소의 전환 기능을 사용해야합니다.
<div v-if = "show"transition = "my-transition"> </div>
전환 기능은 다음 리소스와 함께 사용할 수 있습니다.
• V-IF
• V-Show
• V-FOR (vue-animated-list 플러그인을 사용하여 삽입 및 삭제할 때만 발사)
• 동적 구성 요소 (소개 구성 요소 참조)
• 구성 요소의 루트 노드에서 VUE 인스턴스 DOM 메소드 (예 : vm. $ appendto (el))에 의해 트리거됩니다.
전환으로 요소를 삽입하거나 삭제할 때 Vue는 다음과 같습니다.
1. "my -transition" - vue.transition (id, hooks) 또는 Transitions 옵션에 등록하십시오. 발견되면 해당 후크는 전환의 다른 단계에서 호출됩니다.
2. CSS 전환 또는 애니메이션의 대상 요소를 자동으로 스니핑하고 적절한 경우 CSS 클래스 이름을 추가/제거하십시오.
3. JavaScript 후크를 찾지 못하고 CSS 전환/애니메이션이 감지되지 않으면 다음 프레임에서 DOM 작업 (삽입/삭제)이 즉시 실행됩니다.
CSS 전환
예
일반적인 CSS 전환은 다음과 같습니다.
<div v-if = "show"transition = "expand"> hello </div>
그런 다음`.expand-transition`,`.expand-enter` 및`.expand-leave`에 대한 CSS 규칙을 추가하십시오.
/* 필수*/. 확장 전환 {전환 : 모든 .3S 용이성; 높이 : 30px; 패딩 : 10px; 배경색 : #eee; 오버플로 : 숨겨진;}/* .expand-enter 입력 시작 상태를 정의합니다* //* .expand-leave 출발의 끝 상태를 정의합니다*/. 확장 엔터, .expand-leave {height : 0; 패딩 : 0 10px; 불투명도 : 0;}동적 바인딩을 통해 동일한 요소에서 다른 전환을 달성 할 수 있습니다.
<div v-if = "show": antransition = "antransitionName"> hello </div>
new vue ({el : '...', data : {show : false, transitionName : 'fade'}})또한 JavaScript 후크를 제공 할 수 있습니다.
vue.Transition ( 'expand', {preverenter : function (el) {el.textContent = 'proforeenter'}, enter : function (el) {el) (el) {el.textContent = 'beforeleave'}, Leave : function (el) {el.textContent = 'Leave'}, 내세 : function (el) {el.textContent = 'extleave'}, LeaveCelled : function (el) {// handle cancellation}})전환 CSS 클래스 이름
클래스 이름의 추가 및 전환은 전환 속성의 값에 따라 다릅니다. 예를 들어, Transition = "Fade"에는 세 가지 CSS 클래스 이름이 있습니다.
1..면 변환은 항상 요소에 유지됩니다.
2..fade-enter는 전환에 들어가는 시작 상태를 정의합니다. 하나의 프레임 만 바르고 즉시 삭제하십시오.
3..fade-leave는 전환을 떠나는 최종 상태를 정의합니다. 출발 전환이 시작될 때 효과적이며 종료 된 후에 삭제됩니다.
전환 속성에 값이 없으면 클래스 이름은 기본적으로 .v-transition, .v-enter 및 .v-leave입니다.
사용자 정의 전환 클래스 이름
1.0.14 새로운
전환 JavaScript 정의에서 사용자 정의 CSS 전환 클래스 이름을 선언 할 수 있습니다. 이 사용자 정의 클래스 이름은 기본 클래스 이름을 무시합니다. Animate.css와 같은 타사 CSS 애니메이션 라이브러리와 협력해야 할 때 매우 유용 할 수 있습니다.
<div v-show = "ok"thrownition = "bounce"> 바운스 시청 </div>
vue.Transition ( 'Bounce', {Enterclass : 'BounceInleft', LeaveClass : 'BounceOuTright'})CSS 전환 유형을 명시 적으로 선언합니다
1.0.14 새로운
vue.js는 전환이 종료 될 때들을 수 있도록 이벤트 리스너를 전환 요소에 추가해야합니다. 사용 된 CSS를 기반으로 이벤트는 전환 또는 애니메이션입니다. 두 가지 중 하나만 사용하는 경우 vue.js는 효과적인 CSS 규칙에 따라 해당 이벤트 유형을 자동으로 추론 할 수 있습니다. 그러나 경우에 따라 요소에 동시에 두 가지 유형의 애니메이션이 필요할 수 있습니다. 예를 들어 VUE가 CSS 애니메이션을 트리거하기를 원할 수 있으며 마우스가 매달리면 CSS 전환 효과가 있습니다. 이 경우 Vue가 처리하려는 애니메이션 유형 (애니메이션 또는 전환)을 명시 적으로 선언해야합니다.
vue.Transition ( 'Bounce', {//이 전환 효과는 'AnimationEnd'이벤트 유형 : 'Animation'}에 대해서만들을 것입니다).전환 과정에 대한 자세한 설명
쇼 속성이 변경되면 vue.js는 <div> 요소를 삽입하거나 삭제하여 다음 규칙에 따라 전환 CSS 클래스 이름을 변경합니다.
• 쇼가 거짓이되면 vue.js는 다음과 같습니다.
1. Beforeleave 후크를 호출하십시오.
2. 전환을 트리거하기 위해 V-Leave 클래스 이름을 요소에 추가하십시오.
3. Leave Hook에 전화하십시오.
4. 전환이 종료 될 때까지 기다립니다 (전환 이벤트를 듣습니다).
5. DOM에서 요소를 삭제하고 V-leave 클래스 이름을 삭제합니다.
6. 내세 후크를 호출하십시오.
• 쇼가 참이되면 vue.js는 다음과 같습니다.
1. 전직 후크를 호출하십시오.
2. v-enter 클래스 이름을 요소에 추가하십시오.
3. DOM에 삽입하십시오.
4. Enter Hook에게 전화하십시오.
5. CSS 레이아웃을 한 번 강제로 한 번 v-enter를 효과적으로 만듭니다. 그런 다음 v-enter 클래스 이름을 삭제하여 전환을 트리거하고 요소의 원래 상태로 돌아갑니다.
6. 전환이 끝날 때까지 기다리십시오.
7. Afterenter Hook에게 전화하십시오.
또한, 입력 전환이 여전히 진행중인 동안 요소가 제거되면 EntercAncelled 후크를 호출하여 변경 사항을 정리하거나 생성 된 타이머를 입력하도록합니다. 전환을 차례로 떠나는 것도 마찬가지입니다.
위의 모든 후크 기능이 호출되면, 이는 그들이 속한 vue 인스턴스를 가리 킵니다. 컴파일 규칙 : 컨텍스트에서 전환이 편집되는이 지점은 어떤 맥락에 관한 것인지.
마지막으로, Enter and Leave에는 전환이 끝나는 방식을 명시 적으로 제어하는 두 번째 선택적 콜백 매개 변수가있을 수 있습니다. 따라서 CSS 전환 이벤트를 기다릴 필요가 없습니다. vue.js는이 콜백 호출을 수동으로 호출하여 전환을 종료 할 때까지 기다릴 것입니다. 예를 들어:
ENTER : function (el) {// 두 번째 매개 변수가 없습니다 // CSS 전환 이벤트는 전환이 언제 종료되는지 결정합니다}}vs.
enter : function (el, done) {// 두 번째 매개 변수가 있습니다. // 전환은`done '이라고 불리는 경우에만 끝납니다}<p> 여러 요소가 함께 전환되면 vue.js가 프로세스를 한 번만 강제로 만 강제로 만 강제로 만 제공합니다.
CSS 애니메이션
CSS 애니메이션의 사용이 CSS로 전환되고 있습니다. 차이점은 애니메이션에서 노드가 DOM에 삽입 된 직후에 v-enter 클래스 이름이 삭제되지 않지만 애니메이션 이벤트가 트리거 될 때 삭제된다는 것입니다.
예 : (호환성 접두어 생략)
<span v-show = "show"transceition = "bounce"> 나를 봐! </span> .bounce-transition {display : inline-block; /* 그렇지 않으면 스케일 애니메이션이 작동하지 않습니다*/}. Bounce-Enter {Animation : Bounce-in .5s;}. Bounce-Leave {Animation : Bounce-Out .5s;}@keyframes bounce-in {0% {scale (0); } 50% {변환 : 스케일 (1.5); } 100% {변환 : 스케일 (1); }}@keyframes bounce-out {0% {transform : scale (1); } 50% {변환 : 스케일 (1.5); } 100% {변환 : 스케일 (0); }}자바 스크립트 전환
CSS 규칙을 정의하지 않고는 JavaScript 후크 만 사용할 수도 있습니다. JavaScript 만 사용하는 경우 Enter 및 Leave Hooks는 완료 콜백 호출을해야합니다. 그렇지 않으면 동기식으로 호출되며 전환은 즉시 끝납니다.
CSS : javaScript 전환에 대한 CSS : False를 명시 적으로 선언하는 것이 좋습니다. Vue.js는 CSS 감지를 건너 뛸 것입니다. 또한 CSS 규칙이 실수로 전환을 방해하는 것을 방지합니다.
다음 예에서는 jQuery를 사용하여 사용자 정의 자바 스크립트 전환을 등록합니다.
vue.transition ( 'fade', {css : false, enter : function (el, dod) {// 요소는 돔에 삽입되었습니다. {// enth $ (el) .animate ({불투명도 : 0}, 1000, done)}, leavecancelled : function (el) {$ (el) .stop ()}})와 동일합니다.그런 다음 전환 기능을 사용하십시오.
<p transition = "페이드"> </p>
점근 적 전이
전이는 V-FOR과 함께 사용하여 점근 전이를 생성 할 수 있습니다. 전환 요소에 기능 스 태거, 입력 또는 왼쪽 스 태거를 추가하십시오.
<div v-for = "목록에있는 항목"transfition = "stagger"stagger = "100"> </div>
또는 더 나은 제어를 위해 후크 스 태거, 입력 또는 휴가를 제공하십시오.
vue.transition ( 'stongger', {stonger : function (index) {// 각 전환 항목은 50ms 지연을 추가하지만 최대 지연 제한은 300ms return math.min (300, index * 50)}입니다.이 기사는 "vue.js 프론트 엔드 구성 요소 학습 튜토리얼"으로 편집되었으며 모두가 배우고 읽을 수 있습니다.
vue.js 구성 요소에 대한 튜토리얼은 특수 주제 vue.js 구성 요소 학습 자습서를 클릭하여 학습하십시오.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.