Es gibt keinen Effekt, bis Sie dem Eingabefeld zum ersten Mal den Fokus hinzufügen. Siehe das Bild unten:
Klicken Sie dann auf einen von ihnen, und der Fokus löst eine Animation aus. Das Ergebnis der Animation ist in Abbildung 2 dargestellt:
Geben Sie den Textkennwort -Text -Text in die Mitte ein und werden automatisch nach oben hinzugefügt (verzeihen Sie mir, dass ich das Bild des Animationsprozesses nicht erfassen kann).
Ich habe es getestet und festgestellt, dass nur fortgeschrittene Browser diesen Effekt unterstützen (IE unterstützt nur IE10, IE11 und Edge).
Als nächstes werde ich den Code einfügen. Das Prinzip ist sehr einfach, nämlich die Ergänzung und Löschung von Klassennamen durch Ereignisse auszulösen. Die spezifische Animation wird von CSS3 implementiert, weshalb Browser mit niedrigem Niveau sie nicht unterstützen.
Beispiel für native JS -Implementierungsbeispiel:
<! DocType html> <html lang = "en"> <kopf> <meta charset = "utf-8"> <title> </title> <style> *{padding: 0; Rand: 0; } .Demo {Border: 1px solide grau; Breite: 300px; Höhe: 200px; Position: Relativ; links: 200px; Top: 200px; -Webkit-Übergang: Alle 0,3s linear; -moz-Übergang: Alle 0,3s linear; -MS-Übergang: Alle 0,3s linear; -O-Übergang: Alle 0,3s linear; Übergang: alle 0,3s linear; } .demo Eingabe {width: 200px; Höhe: 100px; Position: absolut; links: 50px; Top: 50px; -Webkit-Übergang: Alle 0,3s linear; -moz-Übergang: Alle 0,3s linear; -MS-Übergang: Alle 0,3s linear; -O-Übergang: Alle 0,3s linear; Übergang: alle 0,3s linear; } .Demo label {Position: absolut; Oben: 100px; Links: 80px; Schriftgröße: 14px; -Webkit-Übergang: Alle 0,3s linear; -moz-Übergang: Alle 0,3s linear; -MS-Übergang: Alle 0,3s linear; -O-Übergang: Alle 0,3s linear; Übergang: alle 0,3s linear; } .Activedemo {Border: 1px #fd715a Solid; -Webkit-Übergang: Alle 0,3s Leichtigkeit; -moz-Übergang: Alle 0,3s Leichtigkeit; -M-Übergang: Alle 0,3s Leichtigkeit; -O-Übergang: Alle 0,3s Leichtigkeit; Übergang: Alle 0,3s leichten; } .ActiveInput {Border: 1px #fd715a solide; -Webkit-Übergang: Alle 0,3s Leichtigkeit; -moz-Übergang: Alle 0,3s Leichtigkeit; -M-Übergang: Alle 0,3s Leichtigkeit; -O-Übergang: Alle 0,3s Leichtigkeit; Übergang: Alle 0,3s leichten; } .ACTIVELABEL {Schriftgröße: 10px; Farbe: #fd715a; Hintergrund: weiß; -Webkit-transform: translate (-20px, -58px); -moz-transform: translate (-20px, -58px); -ms-transform: translate (-20px, -58px); -ms-transform: translate (-20px, -58px); -O-Transformation: Translate (-20px, -58px); Transformation: Translate (-20px, -58px); -Webkit-Übergang: Alle 0,3s linear; -moz-Übergang: Alle 0,3s linear; -MS-Übergang: Alle 0,3 linear; -O-Übergang: Alle 0,3s linear; -O-Übergang: Alle 0,3s linear; Übergang: alle 0,3s linear; } </style></head><body> <div> <input type="text" id="inputDemo"/> <label for="inputDemo">Please enter content</label> </div></body><script> var addEvent= function (obj,event,callback) { if(obj.addEventListener){ obj.addEventListener(event,callback) }else if (obj.attachEvent) {obj.attachEvent ('on'+Ereignis, Callback)}}; var Demo = document.querySelector (". Demo"); var input = document.querySelector ("#inputDemo"); var label = document.querySelector (". Demo -Label"); AddEvent (Eingabe, "Focus", function () {Demo.ClassName+= "Activedemo"; 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*/, '');Das Folgende ist ein einfacher Effekt, der mit Angular implementiert wird. Das Prinzip ist sehr einfach, nämlich die DOM in der Anweisung zur Implementierung von Animationen zu bedienen.
AngularJS -Implementierungsbeispiel:
<! DocType html> <html Lang = "en" ng-App = "Formanimation"> <head> <meta charset = "utf-8"> <titels> </title> <script src = "lib/angular.min.js" type type = "text/javaScript"> </script> <style> *{padding: 0; Rand: 0; } .Container {width: 445px; Höhe: 370px; Border-Links: 10px fest #D4D4D4; Position: Relativ; Links: 100px; Oben: 100px; } .Container Eingabe {Position: absolut; Oben: 100px; links: 25px; Höhe: 40px; Breite: 385px; } .Container span {width: 80px; Höhe: 25px; Schriftgröße: 10px; Hintergrund: RGB (237,97,83); Farbe: weiß; Position: absolut; links: 300px; Top: 109px; Zeilenhöhe: 25px; text-align: .container .labelStyle {Position: absolut; links: 45px; Oben: 115px; Schriftgröße: 14px; Farbe: #929292; Z-Index: 999; Schriftart: "Helvetica Neue", Helvetica, Arial, Sans-Serif; -Webkit-Übergang: Alle 0,2s Leichtigkeit; -Moz-Übergang: Alle 0,2s Leichtigkeit; -MS-Übergang: Alle 0,2s Leichtigkeit; -O-Übergang: Alle 0,2s Leichtigkeit; Übergang: Alle 0,2s leichten; } .InputActive {Border: 2PX Solid RGB (237,97,90); -Webkit-Übergang: Alle 0,2s Leichtigkeit; -Moz-Übergang: Alle 0,2s Leichtigkeit; -MS-Übergang: Alle 0,2s Leichtigkeit; -O-Übergang: Alle 0,2s Leichtigkeit; Übergang: Alle 0,2s leichten; } .labelActive {Position: absolut; links: 45px; Oben: 115px; Z-Index: 999; Hintergrund: weiß; Grenze: 2px fest weiß; Farbe: RGB (237,97,90); Schriftgröße: 10px; -Webkit-transform: Translate (-10px, -23px); -moz-transform: translate (-10px, -23px); -ms-transform: Translate (-10px, -23px); -O-Transformation: Translate (-10px, -23px); Transformation: Translate (-10px, -23px); -Webkit-Übergang: Alle 0,2s Leichtigkeit; -Moz-Übergang: Alle 0,2s Leichtigkeit; -MS-Übergang: Alle 0,2s Leichtigkeit; -O-Übergang: Alle 0,2s Leichtigkeit; Übergang: Alle 0,2s leichten; } </style> </head> <body ng-controller = "formanimationController"> <form action = "" Form-Animation> <Label für = "inputDemo"> Inhalt eingeben. .Controller ('FormanimationController', function () {}) .directive ('Formanimation', ['$ animim', function ($ animate) {return {prestrict: 'ea', link: function (scope, element, attr) {element.find ("Eingabe". element.find ("label"). removeclass ("labelstyle"). }}}}}}]) </script> </html>Zusammenfassen
Die beiden oben genannten Methoden spiegeln nur die Implementierungsmethode wider. Für bestimmte Implementierungsstile können Sie sich auf die Renderings verweisen und den CSS -Stil anpassen. Ich hoffe, der Inhalt dieses Artikels wird für alle hilfreich sein, AngularJs und JS zu lernen. Wenn Sie Fragen haben, können Sie eine Nachricht zur Kommunikation überlassen. Vielen Dank für Ihre Unterstützung bei Wulin.com.