ผ่านระบบการเปลี่ยนแปลงของ Vue.js คุณสามารถเพิ่มเอฟเฟกต์ภาพเคลื่อนไหวการเปลี่ยนแปลงในกระบวนการแทรก/ลบโหนด DOM ได้อย่างง่ายดาย VUE จะเพิ่ม/ลบชื่อคลาส CSS ในเวลาที่เหมาะสมเพื่อทริกเกอร์เอฟเฟกต์การเปลี่ยนแปลง/ภาพเคลื่อนไหว CSS3 นอกจากนี้คุณยังสามารถให้ฟังก์ชันตะขอ JavaScript ที่สอดคล้องกันเพื่อดำเนินการ DOM ที่กำหนดเองในระหว่างกระบวนการเปลี่ยนผ่าน
การใช้คำสั่ง v-transition = "my-transition" เป็นตัวอย่างเมื่อโหนด DOM ที่มีคำสั่งนี้ถูกแทรกหรือลบออก Vue จะ:
ใช้ ID ของ MY-TRANSITION เพื่อดูว่ามีวัตถุ Hook JavaScript ที่ลงทะเบียนหรือไม่ วัตถุนี้สามารถลงทะเบียนทั่วโลกโดย vue.transition (id, hooks) หรือกำหนดภายในองค์ประกอบปัจจุบันผ่านตัวเลือกการเปลี่ยน หากพบวัตถุนี้ตะขอที่เกี่ยวข้องจะถูกเรียกในขั้นตอนต่าง ๆ ของภาพเคลื่อนไหวการเปลี่ยนแปลง
ตรวจพบโดยอัตโนมัติว่าองค์ประกอบเป้าหมายมีเอฟเฟกต์การเปลี่ยนแปลง CSS หรือเอฟเฟกต์ภาพเคลื่อนไหวที่ใช้และเพิ่ม/ลบชื่อคลาส CSS ในเวลาที่เหมาะสม
หากไม่ได้ให้ฟังก์ชั่นตะขอ JavaScript และไม่พบเอฟเฟกต์การเปลี่ยน/การเคลื่อนไหว CSS ที่สอดคล้องกันการแทรก/การกำจัดของ DOM จะดำเนินการทันทีในเฟรมถัดไป
เอฟเฟกต์การเปลี่ยนแปลงทั้งหมด vue.js จะมีผลเฉพาะในกรณีที่การดำเนินการ DOM ถูกเรียกผ่าน vue.js. ทริกเกอร์สามารถทำได้โดยคำแนะนำในตัวเช่น V-IF หรือผ่านวิธีการอินสแตนซ์ VUE เช่น VM. $ appendto ()
ผลการเปลี่ยนแปลง CSS
เอฟเฟกต์การเปลี่ยนแปลง CSS ทั่วไปถูกกำหนดดังนี้:
<div v-if = "show" v-transition = "Expand"> สวัสดี </div>
คุณต้องกำหนดคลาส CSS สามคลาส: .Expand-Transition, .Expand-Enter-Enenter และ .Expand-Leave:
.EXPAND-TRANSITION {การเปลี่ยนแปลง: ความสะดวก. 3S ทั้งหมด; ความสูง: 30px; Padding: 10px; พื้นหลังสี: #eee; โอเวอร์โฟลว์: ซ่อน;}. Expand-Enter-enter, .Expand-Leave {ความสูง: 0; Padding: 0 10px; ความทึบ: 0;}ในเวลาเดียวกันคุณยังสามารถให้ตะขอ JavaScript:
Vue.Transition ('Expand', {ProferEnter: ฟังก์ชั่น (EL) {El.TextContent = 'ProferEnter'}, ป้อน: ฟังก์ชั่น (el) {el.TextContent = 'Enter'}, Afterenter: ฟังก์ชั่น (el) {el.TextContent = '}} El.TextContent = 'beForEleave'}, ออกจาก: ฟังก์ชั่น (el) {el.TextContent = 'ปล่อย'}, afterleave: ฟังก์ชั่น (el) {el.textContent = 'afterleave'}, leavecelled: ฟังก์ชั่น (EL)ผลลัพธ์
ชื่อคลาส CSS ที่ใช้ที่นี่จะถูกกำหนดโดยค่าของคำสั่ง V-transition การใช้ V-transition = "จาง" เป็นตัวอย่างเช่นคลาส CSS. การถ่ายภาพการถ่ายภาพจะมีอยู่เสมอและ. fade-enter และ. fade-leave จะถูกเพิ่มหรือลบโดยอัตโนมัติในเวลาที่เหมาะสม เมื่อคำสั่ง V-transition ไม่ได้ให้ค่าชื่อคลาส CSS ที่ใช้จะเป็นค่าเริ่มต้น. v-transition, .v-enter และ. v-leave
เมื่อแอตทริบิวต์การแสดงเปลี่ยนแปลง Vue จะแทรก/ลบองค์ประกอบ <div> ตามค่าปัจจุบันและเพิ่ม/ลบคลาส CSS ที่เกี่ยวข้องในเวลาที่เหมาะสมดังนี้:
เมื่อการแสดงกลายเป็นเท็จ Vue จะ:
1. โทรหาเบ็ด beforeleave;
2. ใช้ CSS คลาส .V-Veave กับองค์ประกอบเพื่อทริกเกอร์เอฟเฟกต์การเปลี่ยนแปลง
3. โทรหาเบ็ดลา;
4. รอผลการเปลี่ยนแปลงที่จะดำเนินการ; (ฟังเหตุการณ์ TransitionEnd)
5. ลบองค์ประกอบออกจาก DOM และลบคลาส CSS .v-leave
6. โทรหาเบ็ดท้าย
เมื่อการแสดงเป็นจริง Vue Will:
1. โทรหาเบ็ด Progerenter;
2. ใช้ css class.v-enter กับองค์ประกอบ;
3. แทรกองค์ประกอบลงใน DOM;
4. โทรหา ENTER HOOK;
5. ใช้คลาส. V-enter จากนั้นบังคับให้เลย์เอาต์ CSS เพื่อให้แน่ใจว่า. V-enter มีผล ในที่สุดลบ. v-enter เพื่อกระตุ้นองค์ประกอบให้เปลี่ยนไปสู่สถานะเดิม
6. รอผลการเปลี่ยนผ่านที่จะดำเนินการ;
7. โทรหาตะขอ Afterenter
นอกจากนี้หากองค์ประกอบที่ดำเนินการกับเอฟเฟกต์การเปลี่ยนแปลงที่เข้ามาจะถูกลบออกก่อนที่การเปลี่ยนแปลงจะเสร็จสิ้นการทำงานของ Entercancelled จะถูกดำเนินการ ตะขอนี้สามารถใช้สำหรับการทำความสะอาดงานเช่นการลบตัวจับเวลาที่สร้างขึ้นที่ ENTER เช่นเดียวกับองค์ประกอบที่ถูกแทรกอีกครั้งในระหว่างการเปลี่ยนแปลง
เมื่อฟังก์ชั่น Hook ทั้งหมดข้างต้นถูกดำเนินการจุดนี้จะชี้ไปที่อินสแตนซ์ VUE ที่สอดคล้องกัน หากองค์ประกอบของตัวเองเป็นโหนดรูทของอินสแตนซ์ VUE อินสแตนซ์จะถูกนำไปใช้เช่นนี้ มิฉะนั้นชี้ไปที่อินสแตนซ์ที่คำสั่งการเปลี่ยนแปลงเป็นของ
ในที่สุดฟังก์ชั่น ENTER และปล่อยให้ Hook สามารถยอมรับพารามิเตอร์ที่สองที่เป็นตัวเลือก: ฟังก์ชั่นการโทรกลับ เมื่อลายเซ็นฟังก์ชั่นของคุณมีพารามิเตอร์ที่สองหมายความว่าคุณคาดว่าจะใช้การโทรกลับนี้เพื่อดำเนินการผ่านกระบวนการเปลี่ยนผ่านทั้งหมดอย่างชัดเจนแทนที่จะพึ่งพา Vue เพื่อตรวจจับเหตุการณ์การเปลี่ยนผ่านของการเปลี่ยน CSS โดยอัตโนมัติ ตัวอย่างเช่น:
Enter: function (el) {// ไม่มีพารามิเตอร์ที่สอง // การสิ้นสุดของเอฟเฟกต์การเปลี่ยนแปลงจะถูกกำหนดโดยเหตุการณ์สิ้นสุดการเปลี่ยนแปลง CSS}VS
Enter: function (el, done) {// มีพารามิเตอร์ที่สอง // การสิ้นสุดของเอฟเฟกต์การเปลี่ยนแปลงจะต้องถูกกำหนดโดยการเรียกด้วยตนเอง `done`} ด้วยตนเองเมื่อองค์ประกอบหลายอย่างดำเนินการเอฟเฟกต์การเปลี่ยนแปลงในเวลาเดียวกัน Vue.js จะเป็นแบตช์กระบวนการเพื่อให้แน่ใจว่าเค้าโครงที่ถูกบังคับจะถูกกระตุ้นเพียงครั้งเดียว
แอนิเมชั่น CSS
ภาพเคลื่อนไหว CSS เรียกว่าในลักษณะเดียวกับเอฟเฟกต์การเปลี่ยนแปลง CSS ความแตกต่างคือในแอนิเมชั่นคลาส. V-enter จะไม่ถูกลบออกทันทีหลังจากที่โหนดถูกแทรกลงใน DOM แต่จะถูกลบออกเมื่อเหตุการณ์ AnimationEnd ถูกเรียกใช้
ตัวอย่าง: (ละเว้นคำนำหน้าความเข้ากันได้)
<span v-show = "show" v-transition = "bounce"> ดูฉัน! </span>
.bounce-enter {แอนิเมชั่น: bounce-in .5s;}. bounce-leave {animation: bounce-out .5s;}@keyframes bounce-in {0% {transfor: scale (0); } 50% {แปลง: สเกล (1.5); } 100% {transform: scale (1); }}@keyFrames ตีกลับออก {0% {transform: scale (1); } 50% {แปลง: สเกล (1.5); } 100% {transform: scale (0); -ผลลัพธ์
เอฟเฟกต์การเปลี่ยนจาวาสคริปต์บริสุทธิ์
นอกจากนี้คุณยังสามารถใช้ตะขอ JavaScript โดยไม่ต้องกำหนดกฎการเปลี่ยน CSS ใด ๆ เมื่อใช้ตะขอ JavaScript เท่านั้น ENTER และ HOKS จะต้องใช้การโทรกลับที่เสร็จแล้วไม่เช่นนั้นพวกเขาจะถูกเรียกว่าซิงโครนัสและการเปลี่ยนแปลงจะสิ้นสุดลงทันที ในตัวอย่างต่อไปนี้เราใช้ jQuery เพื่อลงทะเบียนเอฟเฟกต์การเปลี่ยน JavaScript ที่กำหนดเอง:
vue.transition ('fade', {enter: function (el, done) {// องค์ประกอบได้รับการแทรกลงใน DOM ในเวลานี้ // การโทรทำเมื่อภาพเคลื่อนไหวเสร็จสิ้น $ (el) .css ('ความทึบ', 0) {// คล้ายกับ Enter Hook $ (El) .Animate ({ความทึบ: 0}, 1000, DONE)}, leavecancelled: ฟังก์ชั่น (EL) {$ (el). Stop ()}})หลังจากกำหนดการเปลี่ยนแปลงนี้คุณสามารถเรียกได้โดยระบุ ID ที่เกี่ยวข้องกับ V-transition:
<p v-transition = "fade"> </p>
หากองค์ประกอบที่ใช้เอฟเฟกต์การเปลี่ยนจาวาสคริปต์เท่านั้นที่ได้รับผลกระทบจากกฎการเปลี่ยนแปลง/ภาพเคลื่อนไหว CSS อื่น ๆ สิ่งนี้อาจรบกวนกลไกการตรวจจับการเปลี่ยนแปลง CSS ของ Vue เมื่อเผชิญกับสถานการณ์นี้คุณสามารถห้ามการตรวจจับ CSS ได้โดยการเพิ่ม CSS: เท็จลงในวัตถุตะขอของคุณ
เอฟเฟกต์การเปลี่ยนแปลงค่อยๆ
เมื่อใช้ทั้ง V-Transition และ V-Repeat เราสามารถเพิ่มเอฟเฟกต์การเปลี่ยนแปลงแบบก้าวหน้าในองค์ประกอบรายการ คุณเพียงแค่ต้องเพิ่มฟีเจอร์ส่าย, Enter-Stagger หรือ Lave-Stagger (เป็นมิลลิวินาที):
<div v-repeat = "list" v-transition snage = "100"> </div>
หรือคุณยังสามารถจัดหาตะขอ enterstagger หรือ Eavestagg
vue.transition ('smage', {smage: function (index) {// เพิ่ม 50ms ล่าช้าในแต่ละองค์ประกอบการเปลี่ยนแปลง // แต่ความล่าช้าสูงสุดคือ 300ms return math.min (300, ดัชนี * 50)}})ตัวอย่าง:
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น