vue.js의 전환 시스템을 통해 DOM 노드 삽입/제거 프로세스에 전환 애니메이션 효과를 쉽게 추가 할 수 있습니다. VUE는 적절한 시간에 CSS 클래스 이름을 추가/제거하여 CSS3 전환/애니메이션 효과를 트리거합니다. 해당 JavaScript 후크 기능을 제공하여 전환 프로세스 중에 사용자 정의 DOM 작업을 수행 할 수도 있습니다.
이 명령이 포함 된 DOM 노드가 삽입되거나 제거 될 때 V- 전환 = "My-Transition"명령을 예로 들어 Vue는 다음과 같습니다.
My-Transition ID를 사용하여 등록 된 JavaScript 후크 객체가 있는지 확인하십시오. 이 객체는 vue.transition (ID, hooks)에 의해 전 세계적으로 등록되거나 전환 옵션을 통해 현재 구성 요소 내부에서 정의 될 수 있습니다. 이 객체가 발견되면 해당 후크는 전환 애니메이션의 다른 단계에서 호출됩니다.
대상 요소에 CSS 전환 효과 또는 애니메이션 효과가 적용되는지 여부를 자동으로 감지하고 적절한 시간에 CSS 클래스 이름을 추가/제거합니다.
JavaScript 후크 함수가 제공되지 않고 해당 CSS 전환/애니메이션 효과가 감지되지 않으면 DOM의 삽입/제거가 다음 프레임에서 즉시 수행됩니다.
모든 vue.js 전환 효과는 Vue.js를 통해 DOM 작업이 트리거되는 경우에만 적용됩니다. 트리거링은 V-IF와 같은 내장 지침 또는 vm. $ appendto ()와 같은 VUE 인스턴스 방법을 통해 수행 할 수 있습니다.
CSS 전환 효과
일반적인 CSS 전이 효과는 다음과 같이 정의됩니다.
<div v-if = "show"v-transition = "expand"> hello </div>
또한 3 개의 CSS 클래스를 정의해야합니다. .expand-transition, .expand-enter 및 .expand-leave :
.expand-transition {전환 : 모든 .3s 편의; 높이 : 30px; 패딩 : 10px; 배경색 : #eee; 오버플로 : 숨겨진;}. Expand-enter, .expand-leave {높이 : 0; 패딩 : 0 10px; 불투명도 : 0;}동시에 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 클래스 이름은 V- 전환 지침의 값에 의해 결정됩니다. v-transition = "fade"를 예로 들어 보면 CSS 클래스 .Fade-Transition은 항상 존재하며 .fade-enter 및 .fade-leave는 적시에 자동으로 추가 또는 제거됩니다. V- 전환 지시문이 값을 제공하지 않으면 사용 된 CSS 클래스 이름은 기본 .v-transition, .v-enter 및 .v-leave가됩니다.
Show 속성이 변경되면 VUE는 현재 값에 따라 <div> 요소를 삽입/제거하고 다음과 같이 적절한 시간에 해당 CSS 클래스를 추가/제거합니다.
쇼가 거짓이되면 Vue는 다음과 같습니다.
1. Beforeleave 후크를 호출하십시오.
2. 전환 효과를 트리거하려면 요소에 CSS 클래스 .V-Leave를 적용하십시오.
3. Leave Hook에 전화하십시오.
4. 전환 효과가 실행될 때까지 기다리십시오. (전환 이벤트 듣기)
5. DOM에서 요소를 제거하고 CSS 클래스 .V-Leave를 제거하십시오.
6. 내세 후크를 호출하십시오.
쇼가 참이면 Vue는 다음과 같습니다.
1. 전직 후크를 호출하십시오.
2. 요소에 CSS Class.v-enter를 적용하십시오.
3. 요소를 DOM에 삽입하십시오.
4. Enter Hook에게 전화하십시오.
5. .V-Enter 클래스를 적용한 다음 CSS 레이아웃을 강제하여 .v-enter가 적용되도록하십시오. 마지막으로 .v-enter를 제거하여 요소가 원래 상태로 전환되도록 트리거됩니다.
6. 전환 효과가 실행될 때까지 기다리십시오.
7. Afterenter Hook에게 전화하십시오.
또한, 전환이 완료되기 전에 들어오는 전환 효과를 실행하는 요소가 제거되면 EntercAncelled 후크가 실행됩니다. 이 후크는 Enter에서 생성 된 타이머를 제거하는 것과 같은 청소 작업에 사용될 수 있습니다. 전환 중에 다시 삽입되는 요소에도 동일하게 적용됩니다.
위의 모든 후크 기능이 실행되면 해당 VUE 인스턴스를 가리 킵니다. 요소 자체가 VUE 인스턴스의 루트 노드 인 경우 인스턴스가 다음과 같이 적용됩니다. 그렇지 않으면 이것은 전환 명령이 속한 인스턴스를 가리 킵니다.
마지막으로, Enter and Leave Hook 함수는 선택적 두 번째 매개 변수 인 콜백 함수를 수락 할 수 있습니다. 기능 서명에 두 번째 매개 변수가 포함 된 경우 CSS 전환의 전환 이벤트를 자동으로 감지하기 위해 VUE에 의존하지 않고이 콜백을 사용하여 전체 전환 프로세스를 명시 적으로 완료해야합니다. 예를 들어:
Enter : function (el) {// 두 번째 매개 변수 없음 // 전환 효과의 끝은 CSS 전환 종료 이벤트에 의해 결정됩니다}대
enter : function (el, done) {// 두 번째 매개 변수가 있습니다. // 전환 효과의 끝은 'done'}을 수동으로 호출하여 결정해야합니다.여러 요소가 동시에 전환 효과를 수행하면 vue.js는 강제 레이아웃이 한 번만 트리거되도록 프로세스를 배치합니다.
CSS 애니메이션
CSS 애니메이션은 CSS 전환 효과와 같은 방식으로 호출됩니다. 차이점은 애니메이션에서 노드가 DOM에 삽입 된 직후 .V-Enter 클래스가 제거되지 않지만 애니메이션 이벤트가 트리거 될 때 제거된다는 것입니다.
예 : (호환성 접두어 생략)
<span v-show = "show"v-transition = "bounce"> 나를 봐! </span>
.Bounce-Enter {애니메이션 : 바운스-인 .5S;}. 바운스 리브 {애니메이션 : 바운스 아웃 .5S;}@keyframes bounce-in {0% {transform : scale (0); } 50% {변환 : 스케일 (1.5); } 100% {변환 : 스케일 (1); }}@keyframes bounce-out {0% {transform : scale (1); } 50% {변환 : 스케일 (1.5); } 100% {변환 : 스케일 (0); }}결과
순수한 자바 스크립트 전환 효과
CSS 전환 규칙을 정의하지 않고 JavaScript 후크를 사용할 수도 있습니다. JavaScript 후크 만 사용하면 Enter and Leave Hooks는 완료 된 콜백을 사용해야합니다. 그렇지 않으면 동기식으로 호출되며 전환은 즉시 끝납니다. 다음 예에서는 jQuery를 사용하여 사용자 정의 JavaScript 전환 효과를 등록합니다.
vue.Transition ( 'fade', {enter : enter : el, done) {//이 시간에 요소가 DOM에 삽입되었습니다. // 애니메이션이 완료 될 때 완료된 호출 (el) .css ( '불투명도', 0). done) {// enter hook $ (el) .animate와 유사합니다. Animate ({불투명도 : 0}, 1000, done)}, leavecancelled : function (el) {$ (el) .stop ()}})이 전환을 정의한 후 해당 ID를 V- 전환에 지정하여 호출 할 수 있습니다.
<p v-transition = "페이드"> </p>
JavaScript 전환 효과 만 사용하는 요소가 다른 CSS 전환/애니메이션 규칙의 영향을받는 경우 VUE의 CSS 전환 감지 메커니즘을 방해 할 수 있습니다. 이 상황을 만나면 CSS : False를 후크 객체를 추가하여 CSS 감지를 금지 할 수 있습니다.
점차 전환 효과
V- 전환 및 V- 반복을 모두 사용하는 경우 목록 요소에 점진적인 전이 효과를 추가 할 수 있습니다. 스 태거, 입력 또는 휴가 스테이거 기능 (밀리 초)을 추가하면됩니다.
<div v-repeat = "list"v-transition stagger = "100"> </div>
또는 미세한 세분화 된 제어를 위해 Stagger, Enterstagger 또는 Evestagger Hooks를 제공 할 수도 있습니다.
vue.Transition ( 'Stagger', {Stagger : function (index) {// 각 전환 요소에 50ms 지연, // 최대 지연은 300ms return math.min (300, index * 50)}입니다.예:
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.