لا يوجد أي تأثير حتى تضيف التركيز أولاً إلى مربع الإدخال. انظر الصورة أدناه:
ثم انقر فوق أي منهم ، وسيؤدي التركيز إلى قيام الرسوم المتحركة. تظهر نتيجة الرسوم المتحركة في الشكل 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 Gray ؛ العرض: 300 بكسل ؛ الارتفاع: 200 بكسل ؛ الموقف: قريب اليسار: 200 بكسل ؛ أعلى: 200 بكسل ؛ -بكيت ترانس: جميع 0.3S خطي ؛ -انتقال الأوز: كل 0.3s خطي ؛ -MS الانتقال: كل 0.3S خطية ؛ -الران: كل 0.3S خطية ؛ الانتقال: كل 0.3S خطي ؛ } .demo input {width: 200px ؛ الارتفاع: 100px ؛ الموقف: مطلق ؛ اليسار: 50 بكسل ؛ أعلى: 50 بكسل ؛ -بكيت ترانس: جميع 0.3S خطي ؛ -انتقال الأوز: كل 0.3s خطي ؛ -MS الانتقال: كل 0.3S خطية ؛ -الران: كل 0.3S خطية ؛ الانتقال: كل 0.3S خطي ؛ . أعلى: 100px ؛ اليسار: 80 بكسل ؛ حجم الخط: 14px ؛ -بكيت ترانس: جميع 0.3S خطي ؛ -انتقال الأوز: كل 0.3s خطي ؛ -MS الانتقال: كل 0.3S خطية ؛ -الران: كل 0.3S خطية ؛ الانتقال: كل 0.3S خطي ؛ } .activeDemo {border: 1px #fd715a solid ؛ -بكيت الانتقال: كل 0.3s سهولة ؛ -انتقال الأوز: كل 0.3s سهولة ؛ -MS الانتقال: كل 0.3s سهولة ؛ -الرانس: كل 0.3s سهولة ؛ الانتقال: كل 0.3s سهولة ؛ } .activeInput {border: 1px #fd715a solid ؛ -بكيت الانتقال: كل 0.3s سهولة ؛ -انتقال الأوز: كل 0.3s سهولة ؛ -MS الانتقال: كل 0.3s سهولة ؛ -الرانس: كل 0.3s سهولة ؛ الانتقال: كل 0.3s سهولة ؛ } .activelabel {font-size: 10px ؛ اللون: #fd715a ؛ الخلفية: أبيض. -webkit transform: Translate (-20px ، -58px) ؛ -moz-transform: Translate (-20px ، -58px) ؛ -MS-transform: Translate (-20px ، -58px) ؛ -MS-transform: Translate (-20px ، -58px) ؛ -O التحول: ترجمة (-20px ، -58px) ؛ تحويل: ترجمة (-20px ، -58px) ؛ -بكيت ترانس: جميع 0.3S خطي ؛ -انتقال الأوز: كل 0.3s خطي ؛ -MS الانتقال: كل 0.3 خطي ؛ -الران: كل 0.3S خطية ؛ -الران: كل 0.3S خطية ؛ الانتقال: كل 0.3S خطي ؛ } </style> </head> <body> <viv> <input type = "text" id = "inputDemo"/> <label for = "inputDemo"> الرجاء إدخال المحتوى </label> </viv> </body> <script> var addevent = funct if (obj.attachevent) {obj.attachevent ('on'+event ، callback)}} ؛ var demo = document.queryseletric (". Demo") ؛ var input = document.queryselector ("#inputDemo") ؛ var label = document.queryselector (". demo label") ؛ addEvent (الإدخال ، "التركيز" ، الدالة () {demo.className+= "ActiveDemo" ؛ this.className+= "ActiveInput" ؛ label.className+= "Activelabel ؛}) ؛ addEvent (input ، 'Blur' ، function () {this.className = this.classname.replace (// s*ActiveInput/s*/، '') ؛ label.classname = label.classname.replace (// s*activelabel/s*/، '') ؛ label.classname = label.classname.replace (// s*activelabel/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 = "text/javascript"> </script src. type = "text/javaScript"> </script> <style> *{padding: 0 ؛ الهامش: 0 ؛ } .Container {width: 445px ؛ الارتفاع: 370 بكسل ؛ الحدود اليسرى: 10 بكسل Solid #D4D4D4 ؛ الموقف: قريب اليسار: 100px ؛ أعلى: 100px ؛ . أعلى: 100px ؛ اليسار: 25 بكسل ؛ الارتفاع: 40 بكسل ؛ العرض: 385 بكسل ؛ } .Container span {width: 80px ؛ الارتفاع: 25 بكسل ؛ حجم الخط: 10 بكسل ؛ الخلفية: RGB (237،97،83) ؛ اللون: أبيض. الموقف: مطلق ؛ اليسار: 300 بكسل ؛ أعلى: 109px ؛ رفع الخط: 25 بكسل ؛ text-align: .container .labelstyle {position: absolute ؛ اليسار: 45 بكسل ؛ أعلى: 115 بكسل ؛ حجم الخط: 14px ؛ اللون: #929292 ؛ Z-index: 999 ؛ الخط: "Helvetica neue" ، Helvetica ، Arial ، Sans-Serif ؛ -الويبكيت الانتقال: كل 0.2s سهولة ؛ -انتقال الأوز: كل 0.2s سهولة ؛ -MS الانتقال: كل 0.2s سهولة ؛ -الرانس: كل 0.2s سهولة ؛ الانتقال: كل 0.2s سهولة ؛ . -الويبكيت الانتقال: كل 0.2s سهولة ؛ -انتقال الأوز: كل 0.2s سهولة ؛ -MS الانتقال: كل 0.2s سهولة ؛ -الرانس: كل 0.2s سهولة ؛ الانتقال: كل 0.2s سهولة ؛ . اليسار: 45 بكسل ؛ أعلى: 115 بكسل ؛ Z-index: 999 ؛ الخلفية: أبيض. الحدود: 2 بكسل صلب أبيض. اللون: RGB (237،97،90) ؛ حجم الخط: 10 بكسل ؛ -webkit-transform: Translate (-10px ، -23px) ؛ -moz-transform: Translate (-10px ، -23px) ؛ -Ms-transform: Translate (-10px ، -23px) ؛ -O التحول: ترجمة (-10px ، -23px) ؛ التحويل: ترجمة (-10px ، -23px) ؛ -الويبكيت الانتقال: كل 0.2s سهولة ؛ -انتقال الأوز: كل 0.2s سهولة ؛ -MS الانتقال: كل 0.2s سهولة ؛ -الرانس: كل 0.2s سهولة ؛ الانتقال: كل 0.2s سهولة ؛ } </style> </head> <body ng-controller = "formanimationController"> <form action = "" form-animation> <label for = "inputDemo"> الرجاء إدخال المحتوى </label> <input type = "text" id = "inputdemo"/> <span> please in content> .Controller ('formanimationController' ، function () {}) .Directive ('formanimation' ، ['$ animate' ، function ($ animate) {return {rodrict: 'ea' ، link: function ، element ، attr) element.find ("label"). removeClass ("labelstyle"). addClass ("labelaction")}) ؛ }}}}}}]) </script> </html>لخص
تعكس الطريقتان أعلاه طريقة التنفيذ فقط. بالنسبة لأنماط التنفيذ المحددة ، يمكنك الرجوع إلى العروض وضبط نمط CSS. آمل أن يكون محتوى هذه المقالة مفيدًا للجميع لتعلم AngularJS و JS. إذا كان لديك أي أسئلة ، فيمكنك ترك رسالة للتواصل. شكرا لك على دعمك إلى wulin.com.