利用Angularjs和原生JS分别实现动态效果的输入框

时间：2021-05-25

在刚开始没有给输入框添加焦点之前，没有任何效果。见下图：

然后点击其中任何一个，焦点就会触发一个动画，动画的结果见图二：

中间的输入登录密码文字，会自动添加到顶部（原谅我没有截取到动画过程的图片）。

我测试了一下，这样的效果只有高级浏览器支持（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能有所帮助，如果有问题可以留言交流，谢谢大家对的支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章