利用Angularjs和原生射流研究…分别实现动态效果的输入框

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

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

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

我测试了一下，这样的效果只有高级浏览器支持（工业工程只有IE10、IE11、边缘支持)。

下面我来把代码贴上来，原理很简单，就是通过事件触发类名的增加和删除。具体的动画由CSS3来实现，这也是为什么低级浏览器不支持的原因。

原生射流研究…实现示例：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title/title style * { padd : 0；保证金： 0；} .演示{ border: 1px纯灰色；宽度： 300像素；高度： 200像素；相对位置：left : 200 pxtop : 200 px-WebKit-transit :全0.3s线性；-moz-transit :全0.3s线性；-ms-transit :全0.3s线性；-o-transit :全0.3s线性；过渡：全0.3s线性；} .演示输入{宽度： 200像素高度： 100像素；绝对位置：left : 50pxtop : 50px-WebKit-transit :全0.3s线性；-moz-transit :全0.3s线性；-ms-transit :全0.3s线性；-o-transit :全0.3s线性；过渡：全0.3s线性；} .演示标签{ position : absolutetop : 100 pxleft :80 pxfont-size : 14px；-WebKit-transit :全0.3s线性；-moz-transit :全0.3s线性；-ms-transit :全0.3s线性；-o-transit :全0.3s线性；过渡：全0.3s线性；} .activeDEmo {边框： 1px # FD 715 a固体；-WebKit-transit :全0.3s轻松；-moz-transit :全部0.3s轻松；-ms-transit :所有0.3s轻松；-o-transit :所有0.3秒轻松；过渡：全部0.3s轻松；} .activeInput {边框： 1px # FD 715 a固体；-WebKit-transit :全0.3s轻松；-moz-transit :全部0.3s轻松；-ms-transit :所有0.3s轻松；-o-transit :所有0.3秒轻松；过渡：全部0.3s轻松；} .activeLabel { font-size : 10px；color: # fd715a背景：白色；-web套件-transform : translate(-20px，-58px)；-moz-transform : translate(-20px，-58px)；-ms-transform : translate(-20px，-58px)；-o-transform : translate(-20px，-58px)；transform: translate(-20px，-58px)；-WebKit-transit :全0.3s线性；-moz-transit :全0.3s线性；-ms-transit :全0.3线性；-o-transit :全0.3s线性；过渡：全0.3s线性；} /style/headbody div class='demo '输入类型='text' id='inputDemo'/标签为='inputDemo '请输入内容/label/div/body脚本var addEvent=function(obj，Event，callback){ if(obj。addEvent侦听器){ obj。addEvent listener(event，callback)} else if(obj。attachevent){ obj。attachevent(' on ' event，callback)} }；var demo=document.querySelector(' .demo’)；var输入=文档。查询选择器(“# input demo”)；var label=文档。queryselector(' .演示标签');addEvent(输入，' focus '，function(){ demo。类名='活动演示'；这个。类名=“活动输入”；标签。类名=“活动标签”；});addEvent(输入，‘blur’，函数(){ this。类名=这个。类名。替换(/\ s *活动输入\ s */，' ')；标签。类名=标签。类名。替换(/\ s * activeLabel \ s */，' ')；演示。类名=演示。类名。替换(/\ s * activeDemo \ s */，' ')；})/脚本/html下面是用有角的实现的一个简单的效果，原理很简单，就是在指令中通操作数字正射影像图来实现动画。

Angularjs实现示例：

！DOCTYPE html html lang=' en ' ng-app=' formaimation ' head meta charset=' UTF-8 ' title/title script src=' http : lib/angular。量滴js ' type=' text/JavaScript '/script script src=' http : lib/angular-animate。js ' type=' text/JavaScript '/script style * { padd :保证金： 0；} .容器{ width : 445 px h8 : 370 pxborder-left : 10px实心# d4d4d4相对位置：left: 100pxtop: 100px}。容器输入{位置：绝对值；top: 100pxleft: 25px高度： 40px宽度： 385像素；} .集装箱跨度{宽度： 80px高度： 25pxfont-size : 10px背景： rgb(237，97，83)；颜色：白色；绝对位置：left: 300pxtop: 109px线高： 25px文本对齐：中心；} .集装箱标签样式{位置：绝对值；left : 45 xtop : 115 pxfont-size : 14px；color : # 929292 z-index : 999；字体："Helvetica新“，Helvetica，阿丽亚娜，无衬线字体；-WebKit-transit :全0.2s ease-moz-transit :全0.2s轻松；-ms-transit :全0.2s轻松；-o-transit :所有0.2s缓解；过渡：全0.2s轻松；} .inputActive { border: 2px固态rgb(237，97，90)；-WebKit-transit :全0.2s ease-moz-transit :全0.2s轻松；-ms-transit :全0.2s轻松；-o-transit :所有0.2s缓解；过渡：全0.2s轻松；} .labelActive { position :绝对值；left : 45 xtop : 115 pxz-index : 999；背景：白色；border: 2px纯白色；color: rgb(237，97，90)；font-size : 10px-web套件-transform : translate(-10px，-23px)；-moz-transform : translate(-10px，-23px)；-ms-transform : translate(-10px，-23px)；-o-transform : translate(-10px，-23px)；transform: translate(-10px，-23px)；-WebKit-transit :全0.2s ease-moz-transit :全0.2s轻松；-ms-transit :全0.2s轻松；-o-transit :所有0.2s缓解；过渡：全0.2s轻松；}/style/head body ng-controller=' formimationcontroller ' form action=' class=' container ' form-动画标签为='inputDemo' class='labelStyle '请输入内容/标签输入类型='text' id='inputDemo'/span请填写内容/span/form/body脚本棱角分明。模块(' formaimation '，[]).控制器(“formAnimationController”，function () { }).指令(' formAnimation '，['$animate '，函数($ animate){返回{ restrict : ' EA '，link:函数(作用域，元素，attr) { element.find('input ').on('focus '，function () { element.find('input ')).添加类(' InputAttive ')；element.find(“标签”).removeClass(“标签样式”).addClass(' labelActive ')})；元素. find('input ').on('blur '，function () { element.find('input ').移除类(“InputAttive”)；element.find(“标签”).removeClass('labelActive ').添加类(“标签样式”)；})} } }])/脚本/html总结

上面的两种方式只是体现了一下实现的方式，具体的实现样式大家可以可以参照效果图，调节半铸钢钢性铸铁(铸造半钢)样式。希望这篇文章的内容对大家学习Angularjs和射流研究…能有所帮助，如果有问题可以留言交流，谢谢大家对我们的支持。