ระบบการเปลี่ยนแปลงของ Vue.js ช่วยให้คุณสามารถใช้เอฟเฟกต์การเปลี่ยนแปลงโดยอัตโนมัติเมื่อองค์ประกอบถูกแทรกหรือลบออกจาก DOM Vue.js จะกระตุ้นการเปลี่ยน CSS หรือภาพเคลื่อนไหวสำหรับคุณในเวลาที่เหมาะสมและคุณยังสามารถให้ฟังก์ชันตะขอ JavaScript ที่สอดคล้องกันเพื่อดำเนินการ DOM ที่กำหนดเองในระหว่างกระบวนการเปลี่ยนผ่าน
ในการใช้เอฟเฟกต์การเปลี่ยนแปลงคุณต้องใช้คุณสมบัติการเปลี่ยนแปลงในองค์ประกอบเป้าหมาย:
<div v-if = "show" transition = "my-transition"> </div>
คุณลักษณะการเปลี่ยนแปลงสามารถใช้กับทรัพยากรต่อไปนี้:
• V-IF
• V-show
• v-for (ยิงเฉพาะเมื่อแทรกและลบโดยใช้ปลั๊กอิน Vue-anomated-list)
•ส่วนประกอบแบบไดนามิก (ดูส่วนประกอบสำหรับการแนะนำ)
•บนโหนดรูทของส่วนประกอบและเรียกใช้โดยวิธีการอินสแตนซ์ VUE DOM (เช่น vm. $ appendto (el))
เมื่อแทรกหรือลบองค์ประกอบด้วยการเปลี่ยนแปลง Vue จะ:
1. พยายามค้นหาวัตถุตะขอเปลี่ยน JavaScript ด้วย ID "My -Transition" - ลงทะเบียนด้วยตัวเลือก Vue.Transition (ID, Hooks) หรือตัวเลือกการเปลี่ยน หากพบว่าตะขอที่เกี่ยวข้องจะถูกเรียกในขั้นตอนต่าง ๆ ของการเปลี่ยนแปลง
2. สูดดมองค์ประกอบเป้าหมายโดยอัตโนมัติสำหรับการเปลี่ยน CSS หรือภาพเคลื่อนไหวและเพิ่ม/ลบชื่อคลาส CSS เมื่อเหมาะสม
3. หากไม่พบตะขอ JavaScript และไม่พบ CSS Transition/Animation การดำเนินการ DOM (แทรก/ลบ) จะถูกดำเนินการทันทีในเฟรมถัดไป
การเปลี่ยนแปลง CSS
ตัวอย่าง
การเปลี่ยนแปลง CSS ทั่วไปเป็นเช่นนี้:
<div v-if = "show" transition = "Expand"> สวัสดี </div>
จากนั้นเพิ่มกฎ CSS สำหรับ `.Expand-Transition`,` .Expand-Enenter` และ `.Expand-Leave`:
/* ต้องการ*/. ขยายการเปลี่ยนแปลง {การเปลี่ยนแปลง: ความสะดวก. 3S ทั้งหมด; ความสูง: 30px; Padding: 10px; พื้นหลังสี: #eee; Overflow: Hidden;}/* .Expand-ENTER กำหนดสถานะเริ่มต้นของรายการ* //* .Expand-Leave กำหนดสถานะสิ้นสุดของการออกเดินทาง*/. Expand-Inter-Enter-enter, .Expand-Leave {ความสูง: 0; Padding: 0 10px; ความทึบ: 0;}คุณสามารถผ่านการเปลี่ยนแปลงที่แตกต่างกันในองค์ประกอบเดียวกันผ่านการเชื่อมโยงแบบไดนามิก:
<div v-if = "show": transition = "transitionName"> สวัสดี </div>
ใหม่ vue ({el: '... ', data: {show: false, transitionName: 'fade'}})นอกจากนี้ยังสามารถให้ตะขอ JavaScript:
Vue.Transition ('Expand', {ProferEnter: function (EL) {El.TextContent = 'ProferEnter'}, Enter: function (el) {el.TextContent = 'Enter'}, Afterenter: ฟังก์ชั่น (el) {el.TextContent El.TextContent = 'beForEleave'}, ออกจาก: ฟังก์ชั่น (el) {el.TextContent = 'ปล่อย'}, afterleave: ฟังก์ชั่น (el) {el.textContent = 'afterleave'}, leavecelled: ฟังก์ชั่น (EL)ชื่อคลาส CSS ในช่วงเปลี่ยนผ่าน
การเพิ่มและการสลับชื่อคลาสขึ้นอยู่กับค่าของแอตทริบิวต์การเปลี่ยนแปลง ตัวอย่างเช่น transition = "fade" จะมีชื่อคลาส CSS สามชื่อ:
1... การเปลี่ยนรูปแบบเฟดจะถูกเก็บไว้ในองค์ประกอบเสมอ
2..-fade-enter กำหนดสถานะเริ่มต้นของการเข้าสู่การเปลี่ยนแปลง ใช้เพียงหนึ่งเฟรมและลบทันที
3..-fade-leave กำหนดสถานะสิ้นสุดของการออกจากการเปลี่ยนแปลง มีผลบังคับใช้ในช่วงเริ่มต้นของการเปลี่ยนแปลงการออกเดินทางและลบหลังจากสิ้นสุด
หากแอตทริบิวต์การเปลี่ยนแปลงไม่มีค่าชื่อคลาสคือ. v-transition, .v-enter และ. v-leave ตามค่าเริ่มต้น
ชื่อคลาสการเปลี่ยนแปลงที่กำหนดเอง
1.0.14 ใหม่
เราสามารถประกาศชื่อคลาสการเปลี่ยน CSS ที่กำหนดเองในคำจำกัดความการเปลี่ยนแปลง JavaScript ชื่อคลาสที่กำหนดเองเหล่านี้แทนที่ชื่อคลาสเริ่มต้น มันจะมีประโยชน์มากเมื่อคุณต้องการร่วมมือกับห้องสมุดแอนิเมชั่น CSS ของบุคคลที่สามเช่น imimate.css:
<div v-show = "ตกลง" transition = "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` ประเภทเหตุการณ์: 'ภาพเคลื่อนไหว'})คำอธิบายโดยละเอียดของกระบวนการเปลี่ยนแปลง
เมื่อคุณสมบัติการแสดงเปลี่ยนไป vue.js จะแทรกหรือลบองค์ประกอบ <div> ตามลำดับการเปลี่ยนชื่อคลาสการเปลี่ยนแปลง CSS ตามกฎต่อไปนี้:
•หากการแสดงกลายเป็นเท็จ vue.js จะ:
1. โทรหาเบ็ด beforeleave;
2. เพิ่มชื่อคลาส V-Leave ลงในองค์ประกอบเพื่อทริกเกอร์การเปลี่ยนแปลง
3. โทรหาเบ็ดลา;
4. รอการเปลี่ยนแปลงให้สิ้นสุด (ฟังเหตุการณ์การเปลี่ยนผ่าน);
5. ลบองค์ประกอบจาก DOM และลบชื่อคลาส V-Leave;
6. โทรหาเบ็ดท้าย
•หากการแสดงกลายเป็นจริง vue.js จะ:
1. โทรหาเบ็ด Progerenter;
2. เพิ่มชื่อคลาส V-Enenter ลงในองค์ประกอบ;
3. ใส่ลงใน DOM;
4. โทรหา ENTER HOOK;
5. บังคับเค้าโครง CSS หนึ่งครั้งเพื่อทำให้ V-Enters มีประสิทธิภาพ จากนั้นลบชื่อคลาส V-enter เพื่อกระตุ้นการเปลี่ยนแปลงและกลับสู่สถานะเดิมขององค์ประกอบ;
6. รอการเปลี่ยนแปลงให้สิ้นสุด
7. โทรหาตะขอ Afterenter
นอกจากนี้หากองค์ประกอบถูกลบออกในขณะที่การเปลี่ยนรายการยังอยู่ในระหว่างดำเนินการเบ็ด entercancelled จะถูกเรียกให้ทำความสะอาดการเปลี่ยนแปลงหรือป้อนตัวจับเวลาที่สร้างขึ้น เช่นเดียวกันสำหรับการออกจากการเปลี่ยนแปลงในทางกลับกัน
เมื่อเรียกฟังก์ชั่นตะขอทั้งหมดด้านบนจุดนี้ชี้ไปที่อินสแตนซ์ VUE ที่พวกเขาอยู่ กฎการรวบรวม: ในบริบทที่การเปลี่ยนแปลงถูกรวบรวมจุดนี้เป็นบริบทที่
ในที่สุด Enter and Leave สามารถมีพารามิเตอร์การโทรกลับที่เป็นตัวเลือกที่สองซึ่งควบคุมอย่างชัดเจนว่าการเปลี่ยนแปลงสิ้นสุดลงอย่างชัดเจน ดังนั้นจึงไม่จำเป็นต้องรอเหตุการณ์ CSS TransitionEnd, Vue.js จะรอให้คุณโทรหาการโทรกลับด้วยตนเองเพื่อยุติการเปลี่ยนแปลง ตัวอย่างเช่น:
Enter: function (EL) {// ไม่มีพารามิเตอร์ที่สอง // เหตุการณ์การเปลี่ยนผ่าน CSS กำหนดเมื่อการเปลี่ยนแปลงสิ้นสุดลง}เทียบกับ
Enter: function (el, done) {// มีพารามิเตอร์ที่สอง // การเปลี่ยนแปลงจะสิ้นสุดลงเมื่อ `เสร็จแล้ว` เรียกว่า}<p> เมื่อองค์ประกอบหลายอย่างเปลี่ยนไปด้วยกัน Vue.js จะเป็นแบตช์กระบวนการและบังคับให้เลย์เอาต์เพียงครั้งเดียว
แอนิเมชั่น CSS
การใช้งานของแอนิเมชั่น CSS กำลังเปลี่ยนไปใช้ CSS ความแตกต่างคือในแอนิเมชั่นชื่อคลาส V-enter จะไม่ถูกลบทันทีหลังจากที่โหนดถูกแทรกลงใน DOM แต่จะถูกลบเมื่อเหตุการณ์แอนิเมชั่นถูกเรียกใช้
ตัวอย่าง: (ละเว้นคำนำหน้าความเข้ากันได้)
<span v-show = "show" transition = "bounce"> ดูที่ฉัน! </span> .bounce-transition {display: inline-block; /* มิฉะนั้นแอนิเมชั่นสเกลจะไม่ทำงาน*/}. bounce-enter {แอนิเมชั่น: ตีกลับ-in .5s;}. การตีกลับ {แอนิเมชั่น: ตีกลับ. 5s;}@keyframes bounce-in {0% {transfort: scale (0); } 50% {แปลง: สเกล (1.5); } 100% {transform: scale (1); }}@keyFrames ตีกลับออก {0% {transform: scale (1); } 50% {แปลง: สเกล (1.5); } 100% {transform: scale (0); -การเปลี่ยน JavaScript
นอกจากนี้คุณยังสามารถใช้ตะขอ JavaScript โดยไม่ต้องกำหนดกฎ CSS ใด ๆ เมื่อใช้ JavaScript เท่านั้นการป้อนและปล่อยตะขอจำเป็นต้องโทรกลับการโทรกลับทำมิฉะนั้นพวกเขาจะถูกเรียกว่าซิงโครนัสและการเปลี่ยนแปลงจะสิ้นสุดลงทันที
เป็นความคิดที่ดีที่จะประกาศ CSS อย่างชัดเจน: เท็จสำหรับการเปลี่ยน JavaScript และ Vue.js จะข้ามการตรวจจับ CSS สิ่งนี้จะป้องกันไม่ให้กฎ CSS รบกวนการเปลี่ยนแปลงโดยไม่ตั้งใจ
ในตัวอย่างต่อไปนี้เราใช้ jQuery เพื่อลงทะเบียนการเปลี่ยน JavaScript ที่กำหนดเอง:
vue.transition ('fade', {css: false, enter: function (el, done) {// องค์ประกอบได้รับการแทรกลงใน dom // ที่เรียกว่าหลังจากแอนิเมชั่น $ (el) .css ('opacity', 0) .Animate ({ความทึบ: 1} {// เหมือนกับ Enter $ (El) .Animate ({Opacity: 0}, 1000, DONE)}, leveCancelled: ฟังก์ชั่น (EL) {$ (EL) .STOP ()}})จากนั้นใช้คุณสมบัติการเปลี่ยนแปลง:
<p transition = "fade"> </p>
การเปลี่ยนแปลงแบบซีมโทติค
การเปลี่ยนผ่านสามารถใช้ร่วมกับ V-for เพื่อสร้างการเปลี่ยนแปลงเชิงเส้นประสาทหลอน เพิ่มฟีเจอร์ที่ซวนเซ, Enter-Stagger หรือ Leave-Stagger ลงในองค์ประกอบการเปลี่ยนแปลง:
<div v-for = "item in list" transition = "snage" sness = "100"> </div>
อีกทางเลือกหนึ่งให้เบ็ดที่ซวนเซ, Enter-Stagger หรือ Lave-Stagger เพื่อการควบคุมที่ดีขึ้น:
Vue.Transition ('Smage', {smage: function (index) {// แต่ละรายการการเปลี่ยนแปลงเพิ่ม 50ms การหน่วงเวลา // แต่ขีด จำกัด การหน่วงเวลาสูงสุดคือ 300ms return math.min (300, ดัชนี * 50)}})บทความนี้ได้รวบรวมไว้ใน "Vue.js front-end การสอนการเรียนรู้การเรียนรู้" และทุกคนยินดีที่จะเรียนรู้และอ่าน
สำหรับการสอนเกี่ยวกับส่วนประกอบ vue.js โปรดคลิกที่หัวข้อพิเศษ vue.js การสอนการเรียนรู้องค์ประกอบเพื่อเรียนรู้
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น