ไม่มีผลจนกว่าคุณจะเพิ่มโฟกัสไปยังกล่องอินพุตเป็นครั้งแรก ดูภาพด้านล่าง:
จากนั้นคลิกที่พวกเขาและโฟกัสจะกระตุ้นภาพเคลื่อนไหว ผลลัพธ์ของภาพเคลื่อนไหวแสดงในรูปที่ 2:
ป้อนข้อความรหัสผ่านเข้าสู่ระบบตรงกลางและจะถูกเพิ่มไปด้านบนโดยอัตโนมัติ (ให้อภัยฉันที่จะไม่จับภาพของกระบวนการเคลื่อนไหว)
ฉันทดสอบและพบว่าเฉพาะเบราว์เซอร์ขั้นสูงเท่านั้นที่รองรับเอฟเฟกต์นี้ (เช่นรองรับ IE10, IE11 และ Edge เท่านั้น)
ต่อไปฉันจะวางรหัส หลักการนั้นง่ายมากซึ่งก็คือการเพิ่มการเพิ่มและการลบชื่อคลาสผ่านเหตุการณ์ แอนิเมชั่นเฉพาะถูกนำไปใช้โดย CSS3 ซึ่งเป็นสาเหตุที่เบราว์เซอร์ระดับต่ำไม่รองรับ
ตัวอย่างการใช้งาน JS ดั้งเดิม:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <style> *{padding: 0; มาร์จิ้น: 0; } .demo {Border: 1px Solid Grey; ความกว้าง: 300px; ความสูง: 200px; ตำแหน่ง: ญาติ; ซ้าย: 200px; ด้านบน: 200px; -webkit-transition: 0.3s เชิงเส้นทั้งหมด; -MOZ-TRANSITION: เส้นตรง 0.3S ทั้งหมด; -MS-TRANSITION: เส้นตรง 0.3S ทั้งหมด; -O-Transition: 0.3s เชิงเส้นทั้งหมด; การเปลี่ยนแปลง: เส้นตรง 0.3S ทั้งหมด; } .demo อินพุต {Width: 200px; ความสูง: 100px; ตำแหน่ง: สัมบูรณ์; ซ้าย: 50px; ด้านบน: 50px; -webkit-transition: 0.3s เชิงเส้นทั้งหมด; -MOZ-TRANSITION: เส้นตรง 0.3S ทั้งหมด; -MS-TRANSITION: เส้นตรง 0.3S ทั้งหมด; -O-Transition: 0.3s เชิงเส้นทั้งหมด; การเปลี่ยนแปลง: เส้นตรง 0.3S ทั้งหมด; } .demo label {ตำแหน่ง: สัมบูรณ์; ด้านบน: 100px; ซ้าย: 80px; ขนาดตัวอักษร: 14px; -webkit-transition: 0.3s เชิงเส้นทั้งหมด; -MOZ-TRANSITION: เส้นตรง 0.3S ทั้งหมด; -MS-TRANSITION: เส้นตรง 0.3S ทั้งหมด; -O-Transition: 0.3s เชิงเส้นทั้งหมด; การเปลี่ยนแปลง: เส้นตรง 0.3S ทั้งหมด; } .activeMo {Border: 1px #fd715a แข็ง; -webkit-transition: ความสะดวก 0.3s ทั้งหมด; -MOZ-TRANSITION: ความสะดวก 0.3S ทั้งหมด; -MS-TRANSITION: ความสะดวก 0.3S ทั้งหมด; -O-Transition: ความสะดวก 0.3s ทั้งหมด; การเปลี่ยนแปลง: ความสะดวก 0.3s ทั้งหมด; } .ActiveInput {เส้นขอบ: 1px #fd715a แข็ง; -webkit-transition: ความสะดวก 0.3s ทั้งหมด; -MOZ-TRANSITION: ความสะดวก 0.3S ทั้งหมด; -MS-TRANSITION: ความสะดวก 0.3S ทั้งหมด; -O-Transition: ความสะดวก 0.3s ทั้งหมด; การเปลี่ยนแปลง: ความสะดวก 0.3s ทั้งหมด; } .ActivelAbel {ขนาดตัวอักษร: 10px; สี: #fd715a; ความเป็นมา: สีขาว; -webkit-transform: แปล (-20px, -58px); -moz-transform: แปล (-20px, -58px); -ms-transform: แปล (-20px, -58px); -ms-transform: แปล (-20px, -58px); -O-transform: แปล (-20px, -58px); แปลง: แปล (-20px, -58px); -webkit-transition: 0.3s เชิงเส้นทั้งหมด; -MOZ-TRANSITION: เส้นตรง 0.3S ทั้งหมด; -MS-TRANSITION: 0.3 เชิงเส้นทั้งหมด; -O-Transition: 0.3s เชิงเส้นทั้งหมด; -O-Transition: 0.3s เชิงเส้นทั้งหมด; การเปลี่ยนแปลง: เส้นตรง 0.3S ทั้งหมด; } </style> </head> <body> <div> <อินพุต type = "text" id = "inputDemo"/> <label for = "inputDemo"> โปรดป้อนเนื้อหา </label> </div> </body> if (obj.attachevent) {obj.attachevent ('on'+เหตุการณ์, การโทรกลับ)}}; var demo = document.querySelector (". demo"); var input = document.QuerySelector ("#inputDemo"); var label = document.QuerySelector (". label demo"); addevent (อินพุต, "focus", function () {demo.className+= "ActiveDemo"; this.className+= "ActiveInput"; label.className+= "Activelabel";}); addEvent (อินพุต, 'blur', function () {this.className = this.className.replace (// s*activeInput/s*/, ''); label.className = label.className.replace (// s*activelabel/s*/, '); demo.className = demo.classname.replace (// s*ActiveMo/S*/, '');ต่อไปนี้เป็นเอฟเฟกต์ง่าย ๆ ที่ใช้โดยใช้ Angular หลักการนั้นง่ายมากซึ่งก็คือการใช้งาน DOM ในคำสั่งเพื่อใช้แอนิเมชั่น
ตัวอย่างการใช้งาน AngularJS:
<! doctype html> <html lang = "en" ng-app = "formanimation"> <head> <meta charset = "utf-8"> <title> </title> <script src = "lib/angular.min.js" type = "ข้อความ/javascript" type = "text/javascript"> </script> <style> *{padding: 0; มาร์จิ้น: 0; } .Container {Width: 445px; ความสูง: 370px; ชายแดนซ้าย: 10px Solid #D4D4D4; ตำแหน่ง: ญาติ; ซ้าย: 100px; ด้านบน: 100px; } .Container อินพุต {ตำแหน่ง: สัมบูรณ์; ด้านบน: 100px; ซ้าย: 25px; ความสูง: 40px; ความกว้าง: 385px; } .Container Span {Width: 80px; ความสูง: 25px; ขนาดฟอนต์: 10px; ความเป็นมา: RGB (237,97,83); สี: สีขาว; ตำแหน่ง: สัมบูรณ์; ซ้าย: 300px; ด้านบน: 109px; ความสูงของสาย: 25px; TEXT-ALGING: .CONTAINER .LABELSTYLE {ตำแหน่ง: สัมบูรณ์; ซ้าย: 45px; ด้านบน: 115px; ขนาดตัวอักษร: 14px; สี: #929292; z-index: 999; แบบอักษร: "Helvetica Neue", Helvetica, Arial, Sans-Serif; -webkit-transition: ความสะดวก 0.2S ทั้งหมด; -MOZ-TRANSITION: ความสะดวก 0.2S ทั้งหมด; -MS-TRANSITION: ความสะดวก 0.2S ทั้งหมด; -O-Transition: ความสะดวก 0.2S ทั้งหมด; การเปลี่ยนแปลง: ความสะดวก 0.2S ทั้งหมด; } .inputactive {Border: 2px Solid RGB (237,97,90); -webkit-transition: ความสะดวก 0.2S ทั้งหมด; -MOZ-TRANSITION: ความสะดวก 0.2S ทั้งหมด; -MS-TRANSITION: ความสะดวก 0.2S ทั้งหมด; -O-Transition: ความสะดวก 0.2S ทั้งหมด; การเปลี่ยนแปลง: ความสะดวก 0.2S ทั้งหมด; } .labelactive {ตำแหน่ง: สัมบูรณ์; ซ้าย: 45px; ด้านบน: 115px; z-index: 999; ความเป็นมา: สีขาว; ชายแดน: 2px Solid White; สี: RGB (237,97,90); ขนาดฟอนต์: 10px; -webkit-transform: แปล (-10px, -23px); -moz-transform: แปล (-10px, -23px); -ms-transform: แปล (-10px, -23px); -O-transform: แปล (-10px, -23px); แปลง: แปล (-10px, -23px); -webkit-transition: ความสะดวก 0.2S ทั้งหมด; -MOZ-TRANSITION: ความสะดวก 0.2S ทั้งหมด; -MS-TRANSITION: ความสะดวก 0.2S ทั้งหมด; -O-Transition: ความสะดวก 0.2S ทั้งหมด; การเปลี่ยนแปลง: ความสะดวก 0.2S ทั้งหมด; } </style> </head> <body ng-controller = "formanimationController"> <form action = "" form-animation> <label for = "inputDemo"> โปรดป้อนเนื้อหา </label> <อินพุต type = "text" id = "inputDemo"/> <pan> .Controller ('formanimationController', function () {}). directive ('formanimation', ['$ animate', ฟังก์ชั่น ($ animate) {return {จำกัด : 'ea', link: function (ขอบเขต, องค์ประกอบ, attr) {element.find ("อินพุต") element.find ("label"). RemoveClass ("labelstyle"). addclass ("labelactive")}); }}}}}}]) </script> </html>สรุป
สองวิธีข้างต้นสะท้อนถึงวิธีการใช้งานเท่านั้น สำหรับรูปแบบการใช้งานที่เฉพาะเจาะจงคุณสามารถอ้างถึงการเรนเดอร์และปรับสไตล์ CSS ฉันหวังว่าเนื้อหาของบทความนี้จะเป็นประโยชน์กับทุกคนในการเรียนรู้ AngularJS และ JS หากคุณมีคำถามใด ๆ คุณสามารถฝากข้อความไว้เพื่อสื่อสาร ขอบคุณสำหรับการสนับสนุน Wulin.com