There is no effect until you first add focus to the input box. See the picture below:
Then click any of them, and the focus will trigger an animation. The result of the animation is shown in Figure 2:
Enter the login password text in the middle and will be automatically added to the top (forgive me to not capture the picture of the animation process).
I tested it and found that only advanced browsers support this effect (IE only supports IE10, IE11, and Edge).
Next, I will paste the code. The principle is very simple, which is to trigger the addition and deletion of class names through events. The specific animation is implemented by CSS3, which is why low-level browsers do not support it.
Native JS implementation example:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin: 0; } .demo{ border: 1px solid gray; width: 300px; height: 200px; position: relative; left: 200px; top: 200px; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } .demo input{ width: 200px; height: 100px; position: absolute; left: 50px; top: 50px; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } .demo label{ position: absolute; top: 100px; left:80px; font-size: 14px; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } .activeDemo{ border: 1px #fd715a solid; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .activeInput{ border: 1px #fd715a solid; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .activeLabel{ font-size: 10px; color: #fd715a; background: white; -webkit-transform: translate(-20px, -58px); -moz-transform: translate(-20px, -58px); -ms-transform: translate(-20px, -58px); -ms-transform: translate(-20px, -58px); -o-transform: translate(-20px, -58px); transform: translate(-20px, -58px); -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3 linear; -o-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 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'+event,callback) } }; var demo=document.querySelector(".demo"); var input=document.querySelector("#inputDemo"); var label=document.querySelector(".demo label"); addEvent(input,"focus", function () { 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*/,' '); demo.className=demo.className.replace(//s*activeDemo/s*/,' '); })</script></html>The following is a simple effect implemented using Angular. The principle is very simple, which is to operate the DOM in the instruction to implement animation.
Angularjs implementation example:
<!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> <script src="lib/angular-animate.js" type="text/javascript"></script> <style> *{ padding: 0; margin: 0; } .container{ width: 445px; height: 370px; border-left: 10px solid #d4d4d4; position: relative; left: 100px; top: 100px; } .container input{ position: absolute; top: 100px; left: 25px; height: 40px; width: 385px; } .container span{ width: 80px; height: 25px; font-size: 10px; background: rgb(237,97,83); color: white; position: absolute; left: 300px; top: 109px; line-height: 25px; text-align: .container .labelStyle{ position: absolute; left: 45px; top: 115px; font-size: 14px; color: #929292; z-index: 999; font: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .inputActive{ border: 2px solid rgb(237,97,90); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .labelActive{ position: absolute; left: 45px; top: 115px; z-index: 999; background: white; border: 2px solid white; color: rgb(237,97,90); font-size: 10px; -webkit-transform: translate(-10px, -23px); -moz-transform: translate(-10px, -23px); -ms-transform: translate(-10px, -23px); -o-transform: translate(-10px, -23px); transform: translate(-10px, -23px); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } </style></head><body ng-controller="formAnimationController"> <form action="" form-animation> <label for="inputDemo">Please enter content</label> <input type="text" id="inputDemo" /> <span>Please fill in content</span> </form></body><script> angular.module('formAnimation',[]) .controller('formAnimationController', function () { }) .directive('formAnimation',['$animate', function ($animate) { return { restrict:'EA', link: function (scope, element, attr) { element.find("input").on('focus', function () { element.find("input").addClass("inputActive"); element.find("label").removeClass("labelStyle").addClass("labelActive") }); element.find("input").on('blur', function () { element.find("input").removeClass("inputActive"); element.find("label").removeClass("labelActive").addClass("labelStyle"); }) } } } } } }])</script></html>Summarize
The above two methods only reflect the implementation method. For specific implementation styles, you can refer to the renderings and adjust the CSS style. I hope the content of this article will be helpful to everyone to learn Angularjs and JS. If you have any questions, you can leave a message to communicate. Thank you for your support to Wulin.com.