利用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 相关文章推荐
JS实现简单的Canvas画图实例
Jul 04 Javascript
jquery ajax属性async(同步异步)示例
Nov 05 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
Mar 05 Javascript
jQuery制作简洁的图片轮播效果
Apr 03 Javascript
JS组件Bootstrap Select2使用方法详解
Apr 17 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 Javascript
JSP防止网页刷新重复提交数据的几种方法
Nov 19 Javascript
理解javascript中的Function.prototype.bind的方法
Feb 03 Javascript
基于daterangepicker日历插件使用参数注意的问题
Aug 10 Javascript
JS实现可针对算术表达式求值的计算器功能示例
Sep 04 Javascript
vue和H5 draggable实现拖拽并替换效果
Jul 29 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
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中for循环语句的几种变型
2006/11/26 PHP
PHP下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
php更新修改excel中的内容实例代码
2014/02/26 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
[原创]来自ImageSee官方 JavaScript图片浏览器
2008/01/16 Javascript
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
js 动态选中下拉框
2009/11/26 Javascript
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
2014/08/04 Javascript
在Node.js应用中读写Redis数据库的简单方法
2015/06/30 Javascript
jqTransform美化表单
2015/10/10 Javascript
js识别uc浏览器的代码
2015/11/06 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
JS实战篇之收缩菜单表单布局
2016/12/10 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
Node.js  事件循环详解及实例
2017/08/06 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
解决layer.confirm选择完之后消息框不消失的问题
2019/09/16 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
[46:43]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第三局
2016/02/28 DOTA
python使用tensorflow深度学习识别验证码
2018/04/03 Python
Python合并多个Excel数据的方法
2018/07/16 Python
对Python发送带header的http请求方法详解
2019/01/02 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
使用python将mysql数据库的数据转换为json数据的方法
2019/07/01 Python
python迭代器常见用法实例分析
2019/11/22 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
利用CSS3的transition属性实现滑动效果
2015/08/05 HTML / CSS
三年级数学教学反思
2014/01/31 职场文书
小班秋游活动方案
2014/02/22 职场文书
技术比武方案
2014/05/19 职场文书
党支部书记岗位职责
2015/02/15 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
初三英语教学反思
2016/02/15 职场文书