利用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 相关文章推荐
基于jquery的loading 加载提示效果实现代码
Sep 01 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
Oct 18 Javascript
JavaScript判断textarea值是否为空并给出相应提示
Sep 04 Javascript
JQuery勾选指定name的复选框集合并显示的方法
May 18 Javascript
jQuery mobile 移动web(6)
Dec 20 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
webpack构建的详细流程探底
Jan 08 Javascript
使用watch监听路由变化和watch监听对象的实例
Feb 24 Javascript
详解Vue中使用Echarts的两种方式
Jul 03 Javascript
详释JavaScript执行环境与执行栈
Apr 02 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
Nov 12 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
Nov 14 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和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
在PHP中使用X-SendFile头让文件下载更快
2014/06/01 PHP
php的ddos攻击解决方法
2015/01/08 PHP
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
Thinkphp 框架扩展之类库扩展操作详解
2020/04/23 PHP
js 实现菜单上下显示附效果图
2013/11/21 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
jquery插件EasyUI中form表单提交实例分享
2016/01/11 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
2016/09/14 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
2018/05/16 Javascript
NodeJS http模块用法示例【创建web服务器/客户端】
2019/11/05 NodeJs
Python利用IPython提高开发效率
2016/08/10 Python
python3.6连接MySQL和表的创建与删除实例代码
2017/12/28 Python
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
python实现xlwt xlrd 指定条件给excel行添加颜色
2020/07/14 Python
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
英国独特礼物想法和个性化礼物网站:notonthehighstreet.com
2018/04/16 全球购物
澳大利亚珠宝商:Shiels
2019/10/06 全球购物
PHP如何防止SQL注入
2014/05/03 面试题
我的老师教学反思
2014/05/01 职场文书
甜品店创业计划书
2014/08/14 职场文书
民主生活会汇报材料
2014/12/15 职场文书
2015年学校教育教学工作总结
2015/04/22 职场文书
公司安全管理制度范本
2015/08/05 职场文书
2016年教师党员公开承诺书
2016/03/24 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书