Il n'y a aucun effet tant que vous avez d'abord ajouté une mise au point à la boîte d'entrée. Voir l'image ci-dessous:
Cliquez ensuite sur l'un d'eux et l'accent déclenchera une animation. Le résultat de l'animation est illustré à la figure 2:
Entrez le texte du mot de passe de connexion au milieu et sera automatiquement ajouté au sommet (pardonnez-moi de ne pas capturer l'image du processus d'animation).
Je l'ai testé et j'ai découvert que seuls les navigateurs avancés prennent en charge cet effet (IE ne prend en charge que IE10, IE11 et Edge).
Ensuite, je vais coller le code. Le principe est très simple, qui est de déclencher l'addition et la suppression des noms de classe à travers des événements. L'animation spécifique est implémentée par CSS3, c'est pourquoi les navigateurs de bas niveau ne le soutiennent pas.
Exemple d'implémentation natif JS:
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <ititle> </ title> <style> * {padding: 0; marge: 0; } .demo {border: 1px gris solide; Largeur: 300px; hauteur: 200px; Position: relative; Gauche: 200px; en haut: 200px; -Webkit-Transition: Tous 0,3S linéaire; -Moz-transition: tous 0,3 s linéaire; -ms-transition: tous 0,3 s linéaire; -o-transition: tous 0,3 s linéaire; Transition: Tous 0,3S linéaire; } .Demo Input {width: 200px; hauteur: 100px; Position: absolue; Gauche: 50px; en haut: 50px; -Webkit-Transition: Tous 0,3S linéaire; -Moz-transition: tous 0,3 s linéaire; -ms-transition: tous 0,3 s linéaire; -o-transition: tous 0,3 s linéaire; Transition: Tous 0,3S linéaire; } .Demo Label {position: Absolute; En haut: 100px; Gauche: 80px; taille de police: 14px; -Webkit-Transition: Tous 0,3S linéaire; -Moz-transition: tous 0,3 s linéaire; -ms-transition: tous 0,3 s linéaire; -o-transition: tous 0,3 s linéaire; Transition: Tous 0,3S linéaire; } .activeDemo {Border: 1Px # fd715a solide; -Webkit-Transition: Toutes les 0,3s facilité; -Moz-Transition: Toute la facilité de 0,3; -ms-transition: toutes les 0,3 s facilité; -o-transition: toutes les 0,3 s facilité; Transition: Toutes les 0,3 s facilité; } .activeInput {border: 1px # fd715a solide; -Webkit-Transition: Toutes les 0,3s facilité; -Moz-Transition: Toute la facilité de 0,3; -ms-transition: toutes les 0,3 s facilité; -o-transition: toutes les 0,3 s facilité; Transition: Toutes les 0,3 s facilité; } .ActiveLabel {Font-Size: 10px; Couleur: # FD715A; Contexte: blanc; -Webkit-transform: tradlate (-20px, -58px); -moz-transform: tradlate (-20px, -58px); -ms-transform: tradlate (-20px, -58px); -ms-transform: tradlate (-20px, -58px); -o-transform: tradlate (-20px, -58px); Transform: tradlate (-20px, -58px); -Webkit-Transition: Tous 0,3S linéaire; -Moz-transition: tous 0,3 s linéaire; -ms-transition: tous 0,3 linéaire; -o-transition: tous 0,3 s linéaire; -o-transition: tous 0,3 s linéaire; Transition: Tous 0,3S linéaire; } </ style> </ head> <body> <div> <input type = "text" id = "inputdemo" /> <label for = "inputdemo"> s'il vous plaît entrer le contenu </ label> </div> </ body> <script> var addEvent = function (obj, événement, callback) {if (obj.addeventListener) {obj.addeventListener (événement, événement)} if (obj.attachevent) {obj.attachevent ('on' + événement, rappel)}}; Var Demo = document.QuerySelector (". Demo"); var input = document.QuerySelector ("# inputdemo"); var label = document.QuerySelector (". Demo Label"); AddEvent (entrée, "focus", function () {demo.classname + = "activemo"; this.classname + = "activeInput"; label.classname + = "activeLabel";}); addEvent (entrée, 'blur', function () {this.classname = this.classname.replace (// s * activeInput / s * /, ''); label.classname = label.classname.replace (// s * activeLabel / s * /, ''); Label.classname = label.classname.replace (// s * activLeLabel / S * / S * /,); Demo.className = Demo.ClassName.replace (// S * ACTIVEMO / S * /, '');Ce qui suit est un effet simple implémenté en utilisant Angular. Le principe est très simple, qui est d'exploiter le DOM dans l'instruction pour implémenter l'animation.
Exemple d'implémentation AngularJS:
<! Doctype html> <html lang = "en" ng-app = "forManmation"> <éad> <meta charset = "utf-8"> <itle> </ title> <script src = "lib / angular.min.js" type = "text / javascript"> </ script> <script src = "lib / angular-anate. type = "text / javascript"> </ script> <style> * {padding: 0; marge: 0; } .Container {width: 445px; hauteur: 370px; Border-Left: 10px solide # d4d4d4; Position: relative; Gauche: 100px; En haut: 100px; } .Container Input {position: Absolute; En haut: 100px; Gauche: 25px; hauteur: 40px; Largeur: 385px; } .Container Span {width: 80px; hauteur: 25px; taille de police: 10px; Contexte: RVB (237,97,83); Couleur: blanc; Position: absolue; Gauche: 300px; En haut: 109px; hauteur de ligne: 25px; Text-Align: .Container .LabelStyle {position: Absolute; Gauche: 45px; En haut: 115px; taille de police: 14px; Couleur: # 929292; Z-Index: 999; FONT: "Helvetica Neue", Helvetica, Arial, Sans-Serif; -Webkit-Transition: Toute la facilité de 0,2 s; -Moz-transition: toutes les 0,2 s facilité; -ms-transition: toutes les 0,2 s facilité; -o-transition: Toute la facilité de 0,2; Transition: Toute la facilité de 0,2 s; } .InputActive {Border: 2px Solid RGB (237,97,90); -Webkit-Transition: Toute la facilité de 0,2 s; -Moz-transition: toutes les 0,2 s facilité; -ms-transition: toutes les 0,2 s facilité; -o-transition: Toute la facilité de 0,2; Transition: Toute la facilité de 0,2 s; } .Labelactive {position: absolue; Gauche: 45px; En haut: 115px; Z-Index: 999; Contexte: blanc; Border: 2px blanc solide; Couleur: RVB (237,97,90); taille de police: 10px; -Webkit-transform: tradlate (-10px, -23px); -moz-transform: tradlate (-10px, -23px); -ms-transform: tradlate (-10px, -23px); -o-transform: tradlate (-10px, -23px); transform: tradlater (-10px, -23px); -Webkit-Transition: Toute la facilité de 0,2 s; -Moz-transition: toutes les 0,2 s facilité; -ms-transition: toutes les 0,2 s facilité; -o-transition: Toute la facilité de 0,2; Transition: Toute la facilité de 0,2 s; } </ style> </ head> <body ng-controller = "forManimationController"> <form action = "" form-animation> <label for = "inputdemo"> s'il vous plaît entrez du contenu </ labe> <input type = "text" id = "inputdemo" /> <span> Veuillez remplir le contenu </span> </1 / body> </ script> angotule.Module (pourmanimer ', []). .Controller ('ForManimationController', fonction () {}) .directive ('forManimation', ['$ Animate', fonction ($ animate) {return {restrict: 'ea', link: function (scope, élément, élément. Element.Find ("Label"). RemoveClass ("LabelStyle"). AddClass ("LabelActive")}); élément.Find ("Input"). ON ('Blur', fonction () {élément.Find ("Label"). }}}}}}]) </ script> </html>Résumer
Les deux méthodes ci-dessus ne reflètent que la méthode d'implémentation. Pour des styles de mise en œuvre spécifiques, vous pouvez vous référer aux rendus et ajuster le style CSS. J'espère que le contenu de cet article sera utile à tout le monde d'apprendre AngularJS et JS. Si vous avez des questions, vous pouvez laisser un message pour communiquer. Merci pour votre soutien à wulin.com.