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


Posted in Javascript onSeptember 01, 2016

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

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

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

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

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

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

Javascript 相关文章推荐
斜45度寻路实现函数
Aug 20 Javascript
关于Aptana Studio生成自动备份文件的解决办法
Dec 23 Javascript
javascript call方法使用说明
Jan 11 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
Jan 23 Javascript
javascript 小数取整简单实现方式
May 30 Javascript
jQuery选择id属性带有点符号元素的方法
Mar 17 Javascript
详解Angular 4.x Injector
May 04 Javascript
jQuery实现的form转json经典示例
Oct 10 jQuery
angular1.x ui-route传参的三种写法小结
Aug 31 Javascript
Vue3.0 响应式系统源码逐行分析讲解
Oct 14 Javascript
JS三级联动代码格式实例详解
Dec 30 Javascript
在antd Table中插入可编辑的单元格实例
Oct 28 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Sep 01 #Javascript
深入理解jQuery3.0的domManip函数
Sep 01 #Javascript
总结AngularJS开发者最常犯的十个错误
Aug 31 #Javascript
ES6记录异步函数的执行时间详解
Aug 31 #Javascript
基于angularjs实现图片放大镜效果
Aug 31 #Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 #Javascript
简洁实用的BootStrap jQuery手风琴插件
Aug 31 #Javascript
You might like
php中print(),print_r(),echo()的区别详解
2014/12/01 PHP
PHP的APC模块实现上传进度条
2015/10/27 PHP
PHP中常用的魔术方法
2017/04/28 PHP
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
jquery提示 &quot;object expected&quot;的解决方法
2009/12/13 Javascript
javascript dom代码应用 简单的相册[firefox only]
2010/06/12 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
2010/12/19 Javascript
JS target与currentTarget区别说明
2011/08/28 Javascript
JavaScript实战之带收放动画效果的导航菜单
2016/08/16 Javascript
浅谈js中的变量名和函数名重名
2017/02/13 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
node的process以及child_process模块学习笔记
2018/03/06 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
2018/11/14 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
2019/04/23 jQuery
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
js实现随机8位验证码
2020/07/24 Javascript
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
[01:56]《DOTA2》中文配音CG
2013/04/22 DOTA
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python装饰器实例大详解
2017/10/25 Python
基于python神经卷积网络的人脸识别
2018/05/24 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
婴儿地球:Baby Earth
2018/12/25 全球购物
高中毕业生自我鉴定
2013/11/03 职场文书
实习生自我评价
2014/01/18 职场文书
公务员平时考核实施方案
2014/03/11 职场文书
驾驶员安全责任书范本
2014/07/24 职场文书
2015年大学辅导员工作总结
2015/05/12 职场文书
好员工观后感
2015/06/17 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书
Python-OpenCV实现图像缺陷检测的实例
2021/06/11 Python