บทความนี้เป็นคำอธิบายที่ครอบคลุมและมีรายละเอียดมากขึ้นที่รวบรวมโดยบรรณาธิการร่วมกับเอกสารอย่างเป็นทางการพร้อมกับรหัสที่สมบูรณ์มากขึ้นเรื่อย ๆ
บทความนี้มาจากเอกสารอย่างเป็นทางการ:
http://cn.vuejs.org/guide/transitions.html
มาดูความรู้ที่เกี่ยวข้องเกี่ยวกับการเปลี่ยนแปลงภาพเคลื่อนไหว:
①คำจำกัดความของภาพเคลื่อนไหวการเปลี่ยนแปลง
พูดง่ายๆคือมันเป็นรูปแบบที่จะหายไปและปรากฏขึ้นเมื่อโมดูลหายไปและปรากฏขึ้น
หากคุณต้องการใช้ภาพเคลื่อนไหวการเปลี่ยนแปลงให้เพิ่มแอตทริบิวต์ลงในแท็ก:
Transition =” ชื่อแอนิเมชั่นการเปลี่ยนแปลง”
ตัวอย่างเช่น:
<div v-if = "box_1" transition = "mytran"> 1 </div>
นี่คือ Mytran ซึ่งเป็นชื่อแอนิเมชั่นการเปลี่ยนแปลง มันเป็นชื่อคลาส ภาพเคลื่อนไหวจะเพิ่มส่วนขยายที่แตกต่างกันหลายรายการตามชื่อนี้ (ดูรายละเอียดด้านล่าง)
②เหตุการณ์การเปลี่ยนแปลงภาพเคลื่อนไหวที่มีผลผูกพัน:
【 1 】 V-IF
【 2 】 V-show
【 3 】 V-for (เรียกใช้เฉพาะเมื่อแทรกและลบคุณสามารถเขียนด้วยตัวเองหรือใช้ปลั๊กอินรายการ vue-anamated);
เขียนด้วยตัวคุณเอง:
<div v-for = "i in items" transition = "mytran"> {{i}} </div>วิธีการเขียนภาพเคลื่อนไหวสั้น ๆ (ดูด้านล่าง)
【 4 】ส่วนประกอบแบบไดนามิก;
[5] บนโหนดรูทของส่วนประกอบและถูกทริกเกอร์โดยวิธีการอินสแตนซ์ VUE DOM (ตัวอย่างเช่น: vm. $ upcendto (EL)) อาจเพิ่มส่วนประกอบลงในโหนดรูท
③CSSแอนิเมชั่น:
[1] ก่อนอื่นคุณต้องมีแอตทริบิวต์การเปลี่ยนแปลงแล้วรับค่า;
【 2 】ประการที่สองมีสามชื่อคลาสใน CSS ที่มีค่าคือ:
สมมติว่าค่าของการเปลี่ยนแปลงคือ Mytran ชื่อคลาสคือ
อธิบาย
.Mytran-Transition
ในสถานะแอนิเมชั่นแอตทริบิวต์การเปลี่ยนแปลงของ CSS จะถูกวางไว้ที่นี่และคลาสที่แสดงถึงจะมีอยู่ใน DOM เสมอ
นอกจากนี้สไตล์ที่นี่จะแทนที่สไตล์ที่จัดทำโดยคลาสเริ่มต้นของฉลาก
.Mytran-ENTER
เมื่อเข้าสู่ส่วนประกอบจะขยายจากสถานะ CSS นี้ไปยังสถานะ CSS ปัจจุบันและคลาสนี้มีเฟรมแรกเท่านั้น
.Mytran-Leave
เมื่อออกไปส่วนประกอบจะคืนค่าสถานะนี้จากสถานะ CSS ดั้งเดิม ชั้นเรียนนี้มีผลตั้งแต่เริ่มต้นและถูกลบเมื่อสิ้นสุดทางออก
เป็นรหัส:
<style> .box {Width: 100px; ความสูง: 100px; ชายแดน: 1px ของแข็งสีแดง; แสดง: Inline-Block; } /* สิ่งนี้กำหนดสถานการณ์ภาพเคลื่อนไหวและสไตล์เมื่อมีอยู่ สไตล์นี้จะแทนที่สไตล์ในคลาส*/ .mytran-transition {การเปลี่ยนแปลง: ความสะดวก 0.3s ทั้งหมด; พื้นหลังสี: Greenyellow; } /* .Mytran-Enenter กำหนดสถานะเริ่มต้นของรายการ* / /* .Mytran-Leave กำหนดสถานะสิ้นสุดของการออกเดินทาง* / .Mytran-Entern, .mytran-Leave {ความสูง: 0; ความกว้าง: 0; } </style> <div id = "แอป"> <button @click = "เปลี่ยน"> คลิกเพื่อซ่อนและแสดงแบบสุ่ม </button> <br/> <div v-if = "box_1" transition = "mytran"> 1 </div> <div v-if = "box_2" <script> var vm = new vue ({el: '#app', ข้อมูล: {box_1: true, box_2: true, box_3: true}, วิธี: {เปลี่ยน: function () {สำหรับ (var i = 1; i <4; 300); </script>การคลิกจะทำให้ 3 บล็อกซ่อนหรือแสดงผล
④javascript hook:
[1] ใส่ง่ายๆสิ่งนี้ไม่ส่งผลกระทบต่อแอนิเมชั่น CSS (ยังคงเปลี่ยนแปลงในสามหมวดหมู่เหล่านั้น);
[2] สิ่งนี้ส่วนใหญ่ใช้เพื่อคว้ารายการและออกเดินทางสี่ช่วงเวลาแต่ละครั้งและใช้ทำบางสิ่ง;
【 3 】แปดช่วงเวลาเหล่านี้คือ:
ENTER: PORYENTER (ก่อนเข้าสู่), ป้อน (ก่อนที่จะป้อนภาพเคลื่อนไหวเพียงแค่เริ่มต้น), Afterenter (ก่อนที่จะป้อนภาพเคลื่อนไหวสิ้นสุด), entercancelled (ก่อนที่ ENTER จะถูกขัดจังหวะ);
ทางออก: beforeleave (ก่อนออก) ออกไป (อนิเมชั่นทางออกเพิ่งเริ่มต้น), affleave (แอนิเมชั่นทางออกสิ้นสุดลง), leavecancelled (ทางออกถูกขัดจังหวะ);
[4] การดัดแปลงของ DOM จะได้รับการกู้คืนในบางกรณี ตัวอย่างเช่นการปรับเปลี่ยนคุณสมบัติ textContent ของ DOM ในขั้นตอนการลาจะคืนค่าสถานะเดิมเมื่อ DOM กลับเข้ามาอีกครั้ง แต่ถ้าแก้ไขในขั้นตอน Enter มันจะไม่ถูกกู้คืน
เป็นรหัส:
vue.transition ('mytran', {pomeenter: function (el) {// ก่อนที่จะป้อน console.log ("ป้อนเวลาเริ่มต้นภาพเคลื่อนไหว:" + วันที่ใหม่ (). getTime ());}, ป้อน: ฟังก์ชัน (el) {el.textcontent = วันที่ใหม่ (); beforeleave: ฟังก์ชั่น (EL) {console.log ("ปล่อยให้อนิเมชั่นเริ่มต้น:" + วันที่ใหม่ (). getTime ());⑤การกำหนดชื่อคลาสการเปลี่ยนชื่อ:
เหตุผลในการปรับแต่งชื่อคลาสทรานซิชันคือเราไม่สามารถกำหนดรูปแบบของแอนิเมชั่น CSS แต่ละรายการได้ตามวิธีการเขียนมาตรฐาน VueJS (เช่นเราดาวน์โหลดรหัสที่เขียนโดยผู้อื่น);
หมายเหตุ: ต้องมีการกำหนดก่อนที่จะประกาศอินสแตนซ์ VUE ที่เกี่ยวข้อง
ก่อนอื่นฉันขอแนะนำชุดภาพเคลื่อนไหวที่แนะนำโดย Tutorial VueJS อย่างเป็นทางการ: (นี่ไม่ใช่ลิงค์ดาวน์โหลดคุณต้องเปิดเพื่อค้นหาลิงค์ดาวน์โหลดก่อนที่คุณจะสามารถดาวน์โหลดได้)
https://daneden.github.io/animate.css/
หลังจากดาวน์โหลดแล้วให้นำเข้าไฟล์ CSS นี้และเริ่มปรับแต่งภาพเคลื่อนไหว
<div id = "app"> <button @click = "เปลี่ยน"> คลิกเพื่อซ่อนและแสดงแบบสุ่ม </button> <br/> <div v-if = "box" transition = "bounce"> 1 </div> </div> '#App', data: {box: true}, วิธีการ: {Change: function () {this.box =! this.box;}}}); </script>อธิบาย:
【 1 】แท็กสัตว์จำเป็นต้องมีคลาสเคลื่อนไหว
【 2 】 Enterclass และ leaveclass เทียบเท่ากับ XXX-Inter-enter และ XXX-Leave ก่อนหน้า;
【 3 】เอฟเฟกต์คือการแฟลชจากซ้ายและแฟลชออกมาจากด้านขวา
[4] คุณต้องตั้งค่าภาพเคลื่อนไหวก่อนที่จะประกาศอินสแตนซ์ VUE มิฉะนั้นจะไม่ถูกต้อง
⑥ใช้ภาพเคลื่อนไหว
ใน Vuejs ภาพเคลื่อนไหวแอนิเมชั่นและภาพเคลื่อนไหวการเปลี่ยนแปลงนั้นแตกต่างกัน
พูดง่ายๆคือภาพเคลื่อนไหวการเปลี่ยนแปลงจะแบ่งออกเป็นสามขั้นตอน: คลาสถาวรคลาสที่เรียกว่าเมื่อเข้าสู่และคลาสจะถูกเรียกเมื่อออก; มีเพียงคลาสถาวรเท่านั้นที่มีคุณลักษณะแอนิเมชั่นการเปลี่ยนแปลงและอีกสองขั้นตอนเท่านั้นที่มีสถานะ CSS เท่านั้น
แอนิเมชั่นแอนิเมชันแบ่งออกเป็นสองขั้นตอน: คลาสที่เรียกว่าเมื่อเข้าสู่และคลาสที่ถูกเรียกใช้เมื่อออก แน่นอนคลาส XXX-Transition มีอยู่ใน DOM (คลาสนี้สามารถใช้เพื่อตั้งค่าแหล่งกำเนิดภาพเคลื่อนไหวหรือไม่ได้ตั้งค่าคลาสนี้)
ในภาพเคลื่อนไหวแอนิเมชั่นคลาสคลาสเมื่อเข้าและออกควรมีเอฟเฟกต์ภาพเคลื่อนไหวเช่น:
@KeyFrames fat {0% {width: 100px} 50% {width: 200px} 100% {width: 100px}} -เมื่อเข้าและออกชื่อคลาสที่ดำเนินการจะเหมือนกับการเปลี่ยนผ่านและอยู่ในรูปแบบของ XXX-Leave และ XXX-enter;
แน่นอนคุณสามารถปรับแต่งชื่อคลาส
รหัสตัวอย่าง:
<style> .box {Width: 100px; ความสูง: 100px; ชายแดน: 1px ของแข็งสีแดง; แสดง: Inline-Block; } @KeyFrames FAT {0% {WIDTH: 100PX} 50% {WIDTH: 200PX} 100% {WIDTH: 100PX}}. } </style> <div id = "app"> <button @click = "เปลี่ยน"> คลิกเพื่อซ่อนและแสดงแบบสุ่ม </button> <br/> <div v-if = "box" transition = "fat"> 1 </div> </div> - </script>ผล:
หายไป: กว้างขึ้นก่อนจากนั้นกู้คืนแล้วหายไป;
Enter: ปรากฏ, กว้าง, กู้คืน, อยู่;
ที่นี่ฉันขี้เกียจและแบ่งปันเอฟเฟกต์แอนิเมชั่นเดียวกัน
⑦นอกจากนี้ยังมี
[1] ประกาศประเภทแอนิเมชั่นอย่างชัดเจน (หากภาพเคลื่อนไหวมีการเปลี่ยนแปลงและภาพเคลื่อนไหวในเวลาเดียวกันและหนึ่งในนั้นจะถูกดำเนินการในสถานการณ์ที่แตกต่างกัน);
[2] คำอธิบายโดยละเอียดเกี่ยวกับกระบวนการเปลี่ยนผ่าน (ลำดับของการดำเนินการ JS Hook และการดำเนินการ CSS เมื่อมีการกระตุ้นภาพเคลื่อนไหว);
[3] แอนิเมชั่น CSS (นั่นคือภาพเคลื่อนไหวตามที่เขียนไว้ด้านบนโดยไม่ได้รับรายละเอียด);
[4] การเปลี่ยน JavaScript (ไม่ใช่ JS Hook, ตะขอหมายความว่าฟังก์ชั่นบางอย่างจะถูกเรียกในระยะที่แน่นอน แต่ตะขอนี้ไม่มีส่วนเกี่ยวข้องกับภาพเคลื่อนไหว) และใช้ JavaScript เพื่อควบคุมภาพเคลื่อนไหวเช่นวิธีการเคลื่อนไหวของ JQuery;
【 5 】การเปลี่ยนแปลงอย่างค่อยเป็นค่อยไปที่ใช้โดย V-For;
เนื่องจากไม่สามารถใช้ได้ในขณะนี้จึงถูกละเว้น หากคุณต้องการดูโปรดเปิดการเชื่อมต่อ:
http://cn.vuejs.org/guide/transitions.html
ข้างต้นเป็นการวิเคราะห์ที่ครอบคลุมของกรณีแอนิเมชั่นการเปลี่ยนแปลง VueJS ของ Vuejs ที่เจ็ดที่แนะนำโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!