在剛開始沒有給輸入框添加焦點之前，沒有任何效果。見下圖：
然後點擊其中任何一個，焦點就會觸發一個動畫，動畫的結果見圖二：
中間的輸入登入密碼文字，會自動添加到頂部（原諒我沒有截取到動畫過程的圖片）。
我測試了一下，這樣的效果只有進階瀏覽器支援（IE只有IE10、IE11、Edge支援）。
下面我來把代碼貼上來，原理很簡單，就是通過事件觸發類名的增加和刪除。具體的動畫由CSS3來實現，這也是為什麼低級瀏覽器不支援的原因。
原生JS實現樣本：
<!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); -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; transition: all 0.3s linear; } </style></head><body> <div class="demo"> <input type="text" id="inputDemo"/> <label for="inputDemo">請輸入內容</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*/,' '); demo.className=demo.className.replace(/\s*activeDemo\s*/,' '); })</script></html>
下面是用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> <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: center; } .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="" class="container" form-animation> <label for="inputDemo" class="labelStyle">請輸入內容</label> <input type="text" id="inputDemo" /> <span>請填寫內容</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>
總結
上面的兩種方式只是體現了一下實現的方式，具體的實現樣式大家可以可以參照效果圖，調節CSS樣式。希望這篇文章的內容對大家學習Angularjs和JS能有所協助，如果有問題可以留言交流，謝謝大家對雲棲社區的支援。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
