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

2019-11-20 09:07:00

字体：大中小

来源：转载

供稿：网友

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

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

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

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

上一篇：Ubuntu系统下Angularjs开发环境安装

下一篇：knockoutjs动态加载外部的file作为component中的template数据源的实现方法